【6日でできるHTML＆CSS入門】セルの結合

―セルを結合して表をレイアウトするコツ―
　テーブルを実務で使うと 「見出しを横に大きく取りたい」「行ラベルを縦にまとめたい」 といった要件が必ず出てきます。
そんな時に威力を発揮するのが colspan（横方向結合）と rowspan（縦方向結合）。
　ここでは “横 → 縦 → 横＋縦の複合” の順でステップアップしながら、結合セルが絡んでも崩れないテーブル構造の作り方を解説します。

１．横方向（colspan）でセルを結合する

1.1. colspan 属性の基本

  • 付与対象： <th> または <td>
  • 値： 結合したい列数（整数）
  • 効果： 指定セルから右方向へ n 列ぶんを 1 セルにまとめる

1.2. サンプル：週次スケジュールのヘッダを結合

ファイル名： lesson15_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>横方向のセル結合</title>
</head>
<body>
  <h1>今週の予定</h1>
  <table border="1">
    <tr>
      <th colspan="5">スケジュール（5 日分）</th>
    </tr>
    <tr>
      <th>月</th><th>火</th><th>水</th><th>木</th><th>金</th>
    </tr>
    <tr>
      <td>会議</td><td>開発</td><td>レビュー</td><td>資料作成</td><td>テスト</td>
    </tr>
  </table>
</body>
</html>

表示結果

1 行目のヘッダは 5 列を 1 セルにまとめているため、下段 5 セルと幅が揃う。

２．縦方向（rowspan）でセルを結合する

2.1. rowspan 属性の基本

  • 付与対象： <th> または <td>
  • 値： 結合したい行数（整数）
  • 効果： 指定セルから下方向へ n 行ぶんを 1 セルにまとめる

2.2. サンプル：社員名簿の行ラベルを結合

ファイル名： lesson15_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>縦方向のセル結合</title>
</head>
<body>
  <h1>部署別メンバー</h1>
  <table border="1">
    <tr>
      <th rowspan="3">営業部</th><td>山口</td>
    </tr>
    <tr><td>伊藤</td></tr>
    <tr><td>高田</td></tr>
  </table>
</body>
</html>

表示結果

左列の “営業部” が 3 行ぶんを占有し、行ラベルとして機能。

3．横＋縦を組み合わせた複合結合

3.1. コア概念

  • 結合セルを含む行は 幅合計が同じ になるよう列数を調整
  • rowspan がある列の下の行では 不足ぶんの <td> を省く ことで帳尻を合わせる

3.2. サンプル：講座タイムテーブル

ファイル名： lesson15_3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複合セル結合</title>
</head>
<body>
  <h1>1 日集中セミナー</h1>
  <table border="1">
    <tr>
      <th colspan="4">スケジュール概要</th>
    </tr>
    <tr>
      <th rowspan="2">午前</th>
      <td colspan="2">基礎講義</td>
      <td>質疑応答</td>
    </tr>
    <tr>
      <td colspan="3">ハンズオン</td>
    </tr>
    <tr>
      <th>午後</th><td>応用編</td><td>グループワーク</td><td>まとめ</td>
    </tr>
  </table>
</body>
</html>

表示結果

使用タグ・属性早見表

要素 / 属性用途よくある値・注意点
<table>テーブル全体border, cellpadding などで装飾
<tr>行を定義各行で列幅が一致するようセル数管理
<th>見出しセル既定で中央寄せ＋太字
<td>データセル通常セル
colspan横方向結合2, 3, …（整数）
rowspan縦方向結合2, 3, …（整数）

まとめ

  • 横結合＝colspan, 縦結合＝rowspan。値は “まとめたいセル数”。
  • 結合セルがある行では、すべての列幅が合計で同じになるよう 他行のセル数を調節 する。
  • 横＋縦の複合では “不足セルを省略” するのがレイアウト崩れ防止のコツ。

これらを押さえれば、会議アジェンダから複雑な帳票まで、“読みやすい表” を自在に構築できます。