【6日でできるHTML入門】行や列のグループ化とセルの結合

　ここでは、HTMLの表をより構造化しつつ、複雑なレイアウトを実現するための「行や列のグループ化」と「セルの結合」について解説します。

　HTMLの標準的な<table>は、単純な行・列の羅列ではなく、⾒出し部・データ部・集計部を論理的に分けたり、複数のセルをまたいでひとつの項目を表現したりといった拡張が可能です。これにより、可読性・保守性・アクセシビリティが向上し、CSSによるスタイリングも効率化できます。

１．行のグループ化

　HTMLでは、表を⾒出し部・データ部・集計部に分けることで、構造を明確化し、CSSを効率良く適用できます。以下のタグでグループ化します。

タグ	用途
<thead>	表の⾒出し行（ヘッダー）をまとめる。
<tbody>	データ行をまとめる。
<tfoot>	集計行（フッター）をまとめる。

1.1. `<thead>` の使い方

ファイル名： lesson23-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🍽️ 売上レポート</title>
<style>
table { border-collapse: collapse; width: 60%; }
th, td { border: solid 1px #666; padding: 8px; }
thead { background-color: #336; color: #fff; }
tbody { background-color: #eef; }
tfoot { background-color: #ddd; font-weight: bold; }
</style>
</head>
<body>
<h1>🍽️ 4月の売上レポート</h1>
<table>
  <caption>🍽️ 4月の売上レポート</caption>
  <thead>
    <tr><th>曜日</th><th>ランチ売上</th><th>ディナー売上</th></tr>
  </thead>
  <tbody>
    <tr><td>月</td><td>120,000円</td><td>200,000円</td></tr>
    <tr><td>火</td><td>110,000円</td><td>210,000円</td></tr>
    <tr><td>水</td><td>130,000円</td><td>190,000円</td></tr>
    <tr><td>木</td><td>140,000円</td><td>220,000円</td></tr>
    <tr><td>金</td><td>150,000円</td><td>230,000円</td></tr>
  </tbody>
  <tfoot>
    <tr><td>合計</td><td>650,000円</td><td>1,050,000円</td></tr>
  </tfoot>
</table>
</body>
</html>

ブラウザの出力例

<thead>内の行はダークブルー背景・白文字
<tbody>内は淡いブルー、<tfoot>はグレーで強調

1.2. `<tbody>` の使い方

データ行を複数グループに分けたいときは、<tbody>を複数回使えます。

1.3. `<tfoot>` の使い方

集計や合計行を末尾にまとめ、スクロール時にも目立たせたり、印刷時に繰り返し表示したりできます。

２．列のグループ化

行だけでなく、列ごとにまとめてスタイルを当てることも可能です。

タグ	用途
<colgroup>	列グループをまとめて定義
<col>	個々の列に対してスタイルや属性を指定する

2.1. `<colgroup>` の使い方

ファイル名： lesson23-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🍽️ 売上レポート（列グループ）</title>
<style>
table { border-collapse: collapse; width: 60%; }
colgroup:nth-of-type(1) { background-color: #fff; }
colgroup:nth-of-type(2) { background-color: #ffd; }
colgroup:nth-of-type(3) { background-color: #dfd; }
th, td { border: solid 1px #666; padding: 8px; text-align: right; }
th { background-color: #336; color: #fff; text-align: center; }
</style>
</head>
<body>
<h1>🍽️ 4月の売上レポート</h1>
<table>
  <caption>🍽️ 4月の売上レポート</caption>
  <colgroup span="1"></colgroup>
  <colgroup span="1" class="lunch"></colgroup>
  <colgroup span="1" class="dinner"></colgroup>
  <thead>
    <tr><th>曜日</th><th>ランチ売上</th><th>ディナー売上</th></tr>
  </thead>
  <tbody>
    <tr><td>月</td><td>120,000円</td><td>200,000円</td></tr>
    <tr><td>火</td><td>110,000円</td><td>210,000円</td></tr>
    <tr><td>水</td><td>130,000円</td><td>190,000円</td></tr>
    <tr><td>木</td><td>140,000円</td><td>220,000円</td></tr>
    <tr><td>金</td><td>150,000円</td><td>230,000円</td></tr>
  </tbody>
</table>
</body>
</html>

ブラウザの出力例

colgroup:nth-of-type(2) で「ランチ売上」列全体をクリーム色に
colgroup:nth-of-type(3) で「ディナー売上」列をライトグリーンに

2.2. `<col>` の使い方

<colgroup>内に直接<col style="…">を並べることで、1列ずつ細かく指定できます。

３．セルの結合

列や行をまたいでセルを結合し、複雑なレイアウトを作成できます。

属性	用途
colspan	横方向にセルを結合（列結合）
rowspan	縦方向にセルを結合（行結合）

3.1. `colspan` の使い方

ファイル名： lesson23-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📅 会議スケジュール</title>
<style>
table { border-collapse: collapse; width: 90%; }
th, td { border: solid 1px #666; width: 120px; padding: 6px; text-align: center; }
caption { caption-side: top; font-weight: bold; margin-bottom: 8px; }
</style>
</head>
<body>
<h1>📅 週次会議予定</h1>
<table>
  <caption>📅 週次会議予定</caption>
  <tr><th>時間帯</th><th>月</th><th>火</th><th>水</th></tr>
  <tr>
    <td>10:00–11:00</td>
    <td colspan="2" style="background:#ffe4b5;">プロジェクトA打合せ</td>
    <td>営業会議</td>
  </tr>
  <tr>
    <td>13:00–14:00</td>
    <td>技術検討</td>
    <td colspan="2" style="background:#d5f5e3;">全社ミーティング</td>
  </tr>
</table>
</body>
</html>

1行目の「プロジェクトA打合せ」を火曜日まで横に2セル分結合
2行目の「全社ミーティング」を水曜日まで結合

ブラウザの出力例

3.2. `rowspan` の使い方

ファイル名： lesson23-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📊 販売実績</title>
<style>
table { border-collapse: collapse; width: 50%; }
th, td { border: solid 1px #666; padding: 6px; text-align: center; }
caption { caption-side: top; font-weight: bold; margin-bottom: 8px; }
</style>
</head>
<body>
<h1>📊 4月 販売実績</h1>
<table>
  <caption>📊 4月 販売実績</caption>
  <tr><th>カテゴリ</th><th>商品</th><th>販売数</th></tr>
  <tr>
    <td rowspan="2">ドリンク</td>
    <td>コーヒー</td><td>150</td>
  </tr>
  <tr>
    <td>紅茶</td><td>120</td>
  </tr>
  <tr>
    <td>フード</td><td>サンドイッチ</td><td> 80</td>
  </tr>
</table>
</body>
</html>

ブラウザの出力例

「ドリンク」カテゴリを2行にわたって結合し、商品ごとに並べる。

４．CSS指定の優先順位

　thead・tbody・tfootやcolgroupに指定したスタイルと、th・tdに指定したスタイルが競合した場合、より具体的なセル要素（th, td）側のCSSが優先されます。

適用対象	優先度
セル要素（th, td）	高い（最も具体的）
行のグループ（theadなど）	中
列のグループ（colgroup）	低（最も抽象的）

　例えば、thead { background: gray; } と th { background: orange; } が両方ある場合、ヘッダーセルはオレンジで表示されます。

まとめ

<thead>, <tbody>, <tfoot>：行を⾒出し・データ・集計で論理的に分ける
<colgroup>, <col>：列グループにまとめて一括スタイル
colspan, rowspan：セルを横・縦方向に結合して複雑なレイアウト
CSSの優先順位：セル要素のスタイル＞行グループ＞列グループ

　これらを組み合わせることで、大規模なデータ表や複雑なレイアウトもメンテナブルに実装できます。ぜひ試してみてください。

【6日でできるHTML入門】行や列のグループ化とセルの結合