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

2020年12月12日

この記事では、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