【HTML】rowspan属性でテーブルのセルを縦に結合する

このページについて

このページではHTMLのrowspan属性について解説しています。

rowspan属性はtableタグのtdタグとthタグで使用できるタグになります。セルを指定した数だけ縦方向に結合します。対となる横方向への結合はcolspan属性で行います。

縦方向への結合はレイアウトのずれが起きやすいので、そこだけ注意して組みましょう。

rowspan属性はcolspan属性と同じく、結合したいセルの数を記入するだけでOKです。ただし上でも書いたようにレイアウトのずれが起きやすいので数は一致させておきましょう。

<table>
<tr><td rowspan="2">縦2結合</td><td>1</td></tr>
<tr><td>2</td></tr>
</table>

この場合どうなるかと言うと

縦2結合	1
	2

このようになります。縦に2つ結合しましたが1行目はtdが2つあるので下の行でも2マス分を作成する必要があります。しかし1マス目はすでに上の行でrowspan=”2″を実行しているため、すでに作成されています。そのため後ろの2マス目を作成するだけでOKとなります。

この辺りの仕組みが慣れるまでは難しいかと思います。よくある例はこう言う感じの書き方ですね。

<table>
<tr><td rowspan="2">縦2結合</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>

これを実行すると

縦2結合	2
縦2結合	1	2

こんな感じで、想定していたレイアウトではなくなります。縦に統合した場合はすでに上でセルの定義が行われているということだけ覚えておきましょう。