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列のセルを結合しています。