【HTML】テーブルのセルを結合して表示を整える (※サンプルコードあり)
この記事では、HTML上に書いたテーブル(表)のセルの結合のしかたについて使い方を紹介しています。
表のセルを結合して表示を整える際には必須のコードになります。
そのまま使えるサンプルコードも載せていますので是非参考にしてみてください。
Contents
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 |
ディスカッション
コメント一覧
まだ、コメントがありません