HTMLでテーブルのセルを結合する方法【現役エンジニアが解説】
今回は、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列のセルを結合しています。