【HTML】複雑なセル結合も徹底ガイド！thやtdのセルを結合する方法

RELEASE / 2024.8.7 UPDATE / 2024.08.05

colspan

rowspan

table

セル結合

複雑

thやtdのセルを結合する場合、colspan属性やrowspan属性を使うことで簡単に表のセルを結合することが出来ます。
この記事ではcolspan属性やrowspan属性の使い方から複雑なセル結合の方法までご紹介したいと思います。

この記事の目次を表示

1 thやtdのセルを結合する
2 まとめ

thやtdのセルを結合する

セルを横で結合する

セルを横で結合したい場合は起点となるthやtdにcolspan属性を指定します。
colspan属性には結合したいセルの数を指定します。

<table>
    <tr>
        <th colspan="2">見出し</th>
        <th>見出し</th>
        <th>見出し</th>
    </tr>
    <tr>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
    </tr>
    <tr>
        <td>テキスト</td>
        <td colspan="3">テキスト</td>
    </tr>
    <tr>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
    </tr>
</table>

colspan属性でセルを横に結合する場合、結合セルが含まれる行のthやtdの合計数は結合する数だけ減らす必要があります。
セルを2つに結合する場合はそのセルは2つのセル分の幅になるため、他の行と比較して1つ少ないセル数となります。
セルを3つに結合する場合はそのセルは3つのセル分の幅になるため、他の行と比較して2つ少ないセル数となります。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

セルを縦で結合する

セルを縦で結合したい場合は起点となるthやtdにrowspan属性を指定します。
rowspan属性には結合したいセルの数を指定します。

<table>
    <tr>
        <th rowspan="2">見出し</th>
        <th>見出し</th>
        <th>見出し</th>
        <th>見出し</th>
    </tr>
    <tr>
        <td>テキスト</td>
        <td>テキスト</td>
        <td rowspan="3">テキスト</td>
    </tr>
    <tr>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
    </tr>
    <tr>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
    </tr>
</table>

rowspan属性でセルを縦に結合する場合、結合セルが含まれる列のthやtdの合計数は結合する数だけ減らす必要があります。
セルを2つに結合する場合はそのセルは2つのセル分の幅になるため、他の列と比較して1つ少ないセル数となります。
セルを3つに結合する場合はそのセルは3つのセル分の幅になるため、他の列と比較して2つ少ないセル数となります。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

複雑なセル結合をする

colspan属性とrowspan属性を組み合わせることで複雑に結合された表を作ることが出来ます。

<table>
    <tr>
        <th rowspan="5">見出し</th>
        <th>見出し</th>
        <th>見出し</th>
        <th>見出し</th>
        <th>見出し</th>
    </tr>
    <tr>
        <td>テキスト</td>
        <td colspan="2" rowspan="2">テキスト</td>
        <td>テキスト</td>
    </tr>
    <tr>
        <td>テキスト</td>
        <td rowspan="2">テキスト</td>
    </tr>
    <tr>
        <td>テキスト</td>
        <td>テキスト</td>
        <td>テキスト</td>
    </tr>
    <tr>
        <td colspan="3">テキスト</td>
        <td>テキスト</td>
    </tr>
    <tr>
        <td colspan="5">テキスト</td>
    </tr>
</table>

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

複雑な結合の場合、colspan属性やrowspan属性を一か所指定する度に、その影響を受ける個所のセルの数を調整して表を整ていきます。
ただし、あまりにも複雑なセル結合を必要とする表を作る場合は以下のようなセル結合のジェネレーターが用意されているるのでそれを使う方が簡単だと思います。

https://tabletag.net/ja