背景
表としては1列で表示しつつも、一部の行では2列で表示させたい事があった。
表のセルを結合させるという発想がすぐに出てこず、1つのセルの中にもう1つセルを作れないか考えたが、思うようにはいかなかった。
本記事では、以下画像のような表のセル同士を結合させて一部の行だけ2列に表示させた方法について記載します。
- 表のイメージ
全体のコード
以下が全体のコードを記載します。
今回は表の見出しとなる<th>タグは使用しておりません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表 -->
<table border="1">
<!-- 1行目 -->
<tr>
<td colspan="2">1st Column</td>
</tr>
<!-- 2行目 -->
<tr>
<td colspan="2">1st Column</td>
</tr>
<!-- 3行目 -->
<tr>
<td style="width: 75%;">1st Column</td>
<td style="width: 25%;">2nd Column</td>
</tr>
</table>
</body>
</html>
コードの詳細
ポイントはCSSとして適用させているcolspan属性です。
colspan属性を使用する事でテーブルのセルを横方向に結合させる事ができます。
今回は表を2列で作成しており、1行目と2行目を横方向にセルを結合させています。
<!-- 表 -->
<table border="1">
<!-- 1行目 -->
<tr>
<td colspan="2">1st Column</td>
</tr>
<!-- 2行目 -->
<tr>
<td colspan="2">1st Column</td>
</tr>
<!-- 3行目 -->
<tr>
<td style="width: 75%;">1st Column</td>
<td style="width: 25%;">2nd Column</td>
</tr>
</table>
-
colspan属性=結合するセルの数
のため、今回は2つのセルを横方向に結合させています。
<td colspan="2">1st Column</td>
補足
今回は表のセルを横方向にcolspan属性で結合させましたが、
rowspan属性を使用すると縦方向にセルを結合します。
参考