【HTML入門】rowspanでセルを縦に結合してみよう！

公開日：2017-1-5
プロナビTOP / プログラミング初心者向け技術系ノウハウ・まとめ

表を作っていると、同じ要素が入るセルがいくつか出てきます。そういうときにはセルを縦や横に結合して、見やすくします。セルを縦に結合するにはrowspan属性を、横に結合するにはcolspan属性を指定します。ここではrowspan属性を説明します。

1 セルを縦に結合するには

セルを縦に結合するには

表は、縦や横に隣り合うセルを結合して、1つのセルにすることができます。セルを連結するとも言います。

縦方向に隣り合うセルの内容が同じであれば、結合の一番上になるセルのtd要素またはth要素にrowspan属性を指定します。
たとえば、<th rowspan=”2″>…</th>という形です。

結合するセルの数を指定する

rowspan属性では結合したいセルの数を数値で指定します。上の例では”2″になっています。任意の数のセルを結合することができます。数字を指定しなければ、セルは結合されません。

ただし、数値に”0″を指定すると、この下のセルをすべて縦に結合します。
セルがグループ化されていれば、行グループの終りのセルまで、この下のセルをすべて縦に結合します。
この指定方法は、ブラウザにより対応していない場合もあります。

結合されたセルはどうなる？

結合されるセルについては要素そのものを記述しません。結合されるセルは消えると見なされるためです。
そのため、結合されて消えるセルが含まれる行では、td要素やth要素が他の行よりも少なくなります。

セル結合の注意点

表は要素を行単位で記述するので、縦方向に結合すると、ソースが複雑になります。
結合するセルの位置をしっかり確認し、ソースを記述するときには、タグを入れる場所や消えるセルの記述に注意してください。

横方向にもセルを結合するには

セルは横方法にも結合することができます。
そして、セルは縦方向の結合と横方法の結合を同時に指定することもできます。
この場合はよりソースが複雑になるので、ソースを記述するときにはセルの位置をよく確認しましょう。

HTML上の表示

<html>
  <head>
    <title>表のサンプル</title>
  </head>
  <body>
<table border="1">
	<caption>ソフトドリンクメニュー</caption>
	<tr>
		<th>ホット/コールド</th>
		<th>種類</th>
		<th>サイズ</th>
		<th>価格（円）</th>
	</tr>
	<tr>
		<th rowspan="2">ホット</th>
		<td>コーヒー</td>
		<td>S,M</td>
		<td>150,200</td>
	</tr>
	<tr>
		<!-- 上のセルと結合して消えるセル -->
		<td>紅茶</td>
		<td>Sサイズのみ</td>
		<td>170</td>
	</tr>
	<tr>
		<th>コールド</th>
		<td>コーラ</td>
		<td colspan="2">検討中</td>
		<!-- 左のセルと結合して消えるセル -->
	</tr>
</table>
</body>
</html>