Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>セルを横に結合しましょう!

セルを横に結合しましょう!(td要素、th要素のcolspan属性)

じっくりコースアイコンの説明 じっくりコースアイコンの説明

使用タグ <td colspan="セルの数">〜</td> <th colspan="セルの数">〜</th>

HTML一覧タグ辞典 … <td><th>タグ

<td>タグ<th>タグの colspan 属性を使えば、複数のセルを横に結合できます。値には「2」以上の結合するセルの数を指定し、指定した数だけ横に結合されます。

使用例

<th>タグの colspan を使い、次の記述例のように、見出しセルすべてを結合してみましょう!

表の基本的な構成の記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>

<table border="1" cellpadding="10">
<tr>
<th>1つ目の見出しセル</th>
<th>2つ目の見出しセル</th>
<th>3つ目の見出しセル</th>
</tr>
<tr>
<td>2行目、1つ目のセル</td>
<td>2行目、2つ目のセル</td>
<td>2行目、3つ目のセル</td>
</tr>
<tr>
<td>3行目、1つ目のセル</td>
<td>3行目、2つ目のセル</td>
<td>3行目、3つ目のセル</td>
</tr>
</table>

</body>
</html>
→
colspan属性記述後の記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>

<table border="1" cellpadding="10">
<tr>
<th colspan="3">1つ目の見出しセル</th>
</tr>
<tr>
<td>2行目、1つ目のセル</td>
<td>2行目、2つ目のセル</td>
<td>2行目、3つ目のセル</td>
</tr>
<tr>
<td>3行目、1つ目のセル</td>
<td>3行目、2つ目のセル</td>
<td>3行目、3つ目のセル</td>
</tr>
</table>

</body>
</html>
 

連結する初めのth要素(<th>1つ目の見出しセル</th>)にcolspan属性を記述し、左の記述例にある「<th>2つ目の見出しセル</th>」、「<th>3つ目の見出しセル</th>」は結合するとき不要なセルとなるので、削除しましょう。

使用例の表示

[colspan属性を指定する前の表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 1つ目の見出しセル 1つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、1つ目のセル 3行目、2つ目のセル 3行目、3つ目のセル
↓
[colspan属性を指定した後の表示例]
一人暮らしの前向きな料理
1つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、1つ目のセル 3行目、2つ目のセル 3行目、3つ目のセル

このように、「colspan="3"」の指定により1行目の3つのセルがすべて連結されました。

関連情報ページ

このタグによく使われるCSS

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system