【HTML】テーブルのセルを結合して表示を整える (※サンプルコードあり)

2020年12月12日2022年2月17日

この記事では、HTML上に書いたテーブル（表）のセルの結合のしかたについて使い方を紹介しています。

表のセルを結合して表示を整える際には必須のコードになります。

そのまま使えるサンプルコードも載せていますので是非参考にしてみてください。

HTMLのテーブルのセルを結合する

テーブルのセルを結合するには、tdタグやthタグに対して、colspan属性やrowspan属性を追加することで実現できます。

colspan属性で横（水平方向）に結合する

tdタグにcolspan属性を追加することでセルを横に結合することができます。

colspan属性の値で結合するセルの数を指定することができます。

<table border="1">
<tr>
<td colspan="3">セルを横に結合</td>
</tr>
<tr>
<td>セル1</td>
<td>セル2</td>
<td>セル3</td>
</tr>
</table>

セルを横に結合
セル1	セル2	セル3

rowspanで縦（垂直方向）に結合する

tdタグにrowspan属性を追加することでセルを縦に結合することができます。

rowspan属性の値で結合するセルの数を指定することができます。

<table border="1">
<tr>
<td rowspan="3">セルを縦に結合</td>
<td>セル1</td>
</tr>
<tr>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
</tr>
</table>

セルを縦に結合	セル1
	セル2
	セル3

colspanとrowspanを同時に設定する

colspanとrowspanを同時に指定することも可能です。

<table border="1">
<tr>
<td colspan="2" rowspan="2">縦横2セルづつ結合</td>
<td>セル1</td>
</tr>
<tr>
<td>セル2</td>
</tr>
<tr>
<td>セル3-1</td>
<td>セル3-2</td>
</tr>
</table>

縦横2セルづつ結合		セル1
		セル2
セル3-1	セル3-2	セル3-3