テーブルのセルを結合
テーブルでは、別の行や列の複数のセルに対し、1つのセルを割り当てて（セルを結合させて）表示させることもできます。
横方向にセルを結合
セルを結合した様子は言葉で説明するより、見てもらった方が分かりやすいと思います。気になる方は、先に確認ページを参照してみてください。
colspan.html
<html>
<head>
<title>セルをまたぐ</title>
</head>
<body>
<h2>セルをまたぐ</h2>
<table border="1">
<caption>従業員</caption>
<tr>
<th colspan="2">名前</th>
<th>性別</th>
</tr>
<tr>
<td>山田</td>
<td>太郎</td>
<td>男</td>
</tr>
<tr>
<td>鈴木</td>
<td>花子</td>
<td>女</td>
</tr>
</table>
</body>
</html>
この例では、名前を性と名に分けていますが、項目名である「名前」のセルが下の2つのセル（性と名）に対し、横またがって（結合されて）表示されています。
このように、横方向にセルを結合するには、<td>あるいは、<th>タグにcolspan属性を指定します。値には結合するセルの数を指定します。
2つのセルを横方向に結合するため、結合されたセルの右にあるセルは、セル1つ分右にずれて表示されることになります。
そのため、上の例では、2列目を定義している<tr>が<td>を3つ分ネストしているのに対し、1列目を定義する<tr>は<td>を2つ分しかネストしないことになります。
縦方向にセルを結合
こちらも見てもらった方が分かりやすいと思いますので、先に確認ページを見てください。
rowspan.html
<html>
<head>
<title>セルをまたぐ その2</title>
</head>
<body>
<h2>セルをまたぐ その2</h2>
<table border="1">
<caption>戸籍</caption>
<tr>
<th>性</th>
<th>名</th>
<th>性別</th>
</tr>
<tr>
<td rowspan="2">山田</td>
<td>太郎</td>
<td>男</td>
</tr>
<tr>
<td>花子</td>
<td>女</td>
</tr>
</table>
</body>
</html>
今度は縦方向に結合します。「山田」のセルが縦に結合されて表示されています。
縦方向に結合するには<td>あるいは、<th>タグにrowspan属性を指定します。値にはcolspan属性と同様、結合するセルの数を指定します。
この例では縦に結合した分、最後の列を定義する<tr>で<td>を2つ分のネストに減らさなければなりません。
セルの結合は慣れないうちは少し分かりにくいかもしれません。いくつかの例を紹介しておきますので参考にしてみてください（入力例についてはブラウザでソースを表示させて確認してください）。
まとめ
- colspan属性で横方向にまたぐ
- rowspan属性で縦方向にまたぐ
セルの結合
表題と項目名
ページの先頭
2024 Webデザインレッスン