HTMLでテーブルのセルを結合する方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでテーブルのセルを結合する方法について、テーブルの基本構造とセルの結合に分け、簡単に解説していきます。

テーブルの基本構造

テーブルはtableタグ、trタグ、tdタグで表現されます。

見出しとそれ以外に分ける場合は、theadタグとthタグ、tbodyタグも使います。

<table border="1">
    <thead>
        <tr>
            <th>氏名</th>
            <th>性別</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>田中</td>
            <td>男性</td>
        </tr>
        <tr>
            <td>髙橋</td>
            <td>女性</td>
        </tr>
    </tbody>
</table>

上記のコードでは、氏名と性別の一覧を、見出し付きでテーブルで表現しています。

縦方向にセルを結合

縦方向にセルを結合するには、rowspan属性をthタグやtdタグで指定します。

rowspan属性は結合を開始するタグで指定し、値には結合するセル数を指定します。

<table border="1">
    <thead>
        <tr>
            <th>部署</th>
            <th>名前</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">総務</td>
            <td>田中</td>
        </tr>
        <tr>
            <td>髙橋</td>
        </tr>
        <tr>
            <td>財務</td>
            <td>山田</td>
        </tr>
    </tbody>
</table>

上記のコードでは、田中と高橋の二人の部署が総務のため、この2行の部署のセルを結合しています。

横方向にセルを結合

横方向にセルを結合するためには、colspan属性をthタグやtdタグで指定します。

colspan属性も結合を開始するタグで指定し、値に結合するセル数を指定することになります。

<table border="1">
    <thead>
        <tr>
            <th>支店</th>
            <th>定休日</th>
            <th>営業時間</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>渋谷店</td>
            <td>無し</td>
            <td>10:00-19:00</td>
        </tr>
        <tr>
            <td>目黒店</td>
            <td>水曜</td>
            <td>10:00-18:00</td>
        </tr>
        <tr>
            <td>高輪店</td>
            <td colspan="2">未定</td>
        </tr>
    </tbody>
</table>

上記のコードでは、高輪店の支店の定休日や営業時間が未定のため、高輪店のこの2列のセルを結合しています。