tableのセルを結合 rowspanとcolspan
公開：2026.04.07
HTMLのtableでthやtdを結合させる場合、「rowspan」もしくは「colspan」を使用します。
縦並びのセルを結合させるのは「rowspan」…あれ？「colspan」だっけ？と混同することがよくあります。
(;´･ω･)
ですので、今回は実際の使用例と合わせて書き残しておこうと思います。
基本の形のtable
今回使うtableの基本の形はこちらです。
縦並びを列、横並びを行と呼びます。
| こちらがth | こちらがtd | こちらがtd-2 |
|---|---|---|
| こちらがth2 | こちらがtd2 | こちらがtd2-2 |
| こちらがth3 | こちらがtd3 | こちらがtd3-2 |
HTML
<table class="table-defo table-border-all">
<tbody>
<tr>
<th>こちらがth</th>
<td>こちらがtd</td>
<td>こちらがtd-2</td>
</tr>
<tr>
<th>こちらがth2</th>
<td>こちらがtd2</td>
<td>こちらがtd2-2</td>
</tr>
<tr>
<th>こちらがth3</th>
<td>こちらがtd3</td>
<td>こちらがtd3-2</td>
</tr>
</tbody>
</table>rowspanは縦並び（列）のセル結合に使う
「rowspan」を設定した表がこちらです。
基本の形のtableにあった、「こちらがth」のセルと「こちらがth2」を結合させています。
| こちらがth | こちらがtd | こちらがtd-2 |
|---|---|---|
| こちらがtd2 | こちらがtd2-2 | |
| こちらがth3 | こちらがtd3 | こちらがtd3-2 |
HTML
<table class="table-defo table-border-all">
<tbody>
<tr>
<th rowspan="2">こちらがth</th><!--このセルと、その下のセル2つを結合させます。-->
<td>こちらがtd</td>
<td>こちらがtd-2</td>
</tr>
<tr>
<!--rowspanでセルを結合させるため、こちらのthは削除します。-->
<td>こちらがtd2</td>
<td>こちらがtd2-2</td>
</tr>
<tr>
<th>こちらがth3</th><!--もしもrowspan="3"であれば、このthも消すことになります。-->
<td>こちらがtd3</td>
<td>こちらがtd3-2</td>
</tr>
</tbody>
</table>colspanは横並び（行）のセル結合に使う
| こちらがth | こちらがtd | |
|---|---|---|
| こちらがth2 | こちらがtd2 | こちらがtd2-2 |
| こちらがth3 | こちらがtd3 | こちらがtd3-2 |
HTML
<table class="table-defo table-border-all">
<tbody>
<tr>
<th>こちらがth</th>
<td colspan="2">こちらがtd</td><!--このセルと、その右隣のセル2つを結合させます。-->
<!--右隣にあったtdは不要になるため削除します。-->
</tr>
<tr>
<th>こちらがth2</th>
<td>こちらがtd2</td><td>こちらがtd2-2</td>
</tr>
<tr>
<th>こちらがth3</th>
<td>こちらがtd3</td><td>こちらがtd3-2</td>
</tr>
</tbody>
</table>まとめ
縦並び（列）のセル結合は「rowspan」、横並び（行）のセル結合は「colspan」を使います。
縦（列）=「rowspan」、横（行）=「colspan」で覚えておこうと思います。
ちなみに、tableの作成例をまとめた記事はこちら。
