HTMLでテーブルを結合する方法｜セルをまとめて見やすくするcolspanとrowspan

Excel

ホームページに表（テーブル）を作るとき、「このセルを横に2つ分まとめたい」「ここは縦に結合したい」と思ったことはありませんか？

HTMLには、そんなときに使える便利な属性があります。それが**colspan（コルスパン）とrowspan（ロウスパン）**です。

この記事では、以下について詳しく解説します：

  • colspanとrowspanの基本的な使い方
  • 実用的なテーブル結合の例
  • 複雑な表を作るためのテクニック
  • よくあるエラーと対処法
  • スタイリングのコツ

これを読めば、見た目のきれいな表を自分で自由に作れるようになりますよ。

スポンサーリンク

テーブル結合の基本概念

HTMLテーブルの構造

HTMLのテーブルは以下の要素で構成されています：

基本要素

  • <table>：テーブル全体を囲む
  • <tr>：table row（表の行）
  • <td>：table data（表のデータセル）
  • <th>：table header（表の見出しセル）

構造例

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
</table>

セル結合の2つの方向

横方向の結合（colspan）

  • 列（カラム）をまたいで結合
  • 複数の列を1つのセルにまとめる
  • 見出しや大分類に適している

縦方向の結合（rowspan）

  • 行（ロー）をまたいで結合
  • 複数の行を1つのセルにまとめる
  • カテゴリやグループ分けに適している

テーブルのセルを横に結合する（colspan）

colspanとは

colspanは**「カラム（列）をいくつ分まとめるか」**を指定する属性です。例えば、見出しを複数列分まとめたいときに使います。

基本的な使い方

2列を結合する例

<table border="1">
  <tr>
    <th colspan="2">商品情報</th>
  </tr>
  <tr>
    <td>商品名</td>
    <td>価格</td>
  </tr>
</table>

実際の表示

商品情報
商品名

実用的なcolspanの例

料金表での使用

<table border="1">
  <tr>
    <th colspan="3">月額料金プラン</th>
  </tr>
  <tr>
    <th>プラン名</th>
    <th>価格</th>
    <th>機能</th>
  </tr>
  <tr>
    <td>ベーシック</td>
    <td>1,000円</td>
    <td>基本機能</td>
  </tr>
  <tr>
    <td>プレミアム</td>
    <td>2,000円</td>
    <td>全機能</td>
  </tr>
</table>

スケジュール表での使用

<table border="1">
  <tr>
    <th>時間</th>
    <th colspan="2">午前中</th>
    <th colspan="2">午後</th>
  </tr>
  <tr>
    <td>詳細</td>
    <td>9:00-10:00</td>
    <td>10:00-12:00</td>
    <td>13:00-15:00</td>
    <td>15:00-17:00</td>
  </tr>
</table>

colspanの注意点

セル数の一致

<!-- 正しい例 -->
<tr>
  <td colspan="2">A</td>  <!-- 2列分 -->
</tr>
<tr>
  <td>B</td>              <!-- 1列目 -->
  <td>C</td>              <!-- 2列目 -->
</tr>

<!-- 間違った例 -->
<tr>
  <td colspan="2">A</td>  <!-- 2列分 -->
</tr>
<tr>
  <td>B</td>              <!-- 1列目のみ →構造が合わない -->
</tr>

数値の意味

  • colspan="1"：通常のセル（省略可能）
  • colspan="2"：2列分の幅
  • colspan="3"：3列分の幅

テーブルのセルを縦に結合する（rowspan）

rowspanとは

rowspanは**「ロー（行）をいくつ分まとめるか」**を指定します。1つの項目が複数行にまたがるような表を作るときに使います。

基本的な使い方

2行を結合する例

<table border="1">
  <tr>
    <th rowspan="2">カテゴリ</th>
    <td>りんご</td>
  </tr>
  <tr>
    <td>みかん</td>
  </tr>
</table>

実際の表示

カテゴリりんご
みかん

実用的なrowspanの例

商品カタログでの使用

<table border="1">
  <tr>
    <th>分類</th>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td rowspan="3">果物</td>
    <td>りんご</td>
    <td>150円</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>100円</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>120円</td>
  </tr>
  <tr>
    <td rowspan="2">野菜</td>
    <td>キャベツ</td>
    <td>200円</td>
  </tr>
  <tr>
    <td>にんじん</td>
    <td>80円</td>
  </tr>
</table>

組織図での使用

<table border="1">
  <tr>
    <td rowspan="3">開発部</td>
    <td>部長</td>
    <td>田中</td>
  </tr>
  <tr>
    <td>主任</td>
    <td>佐藤</td>
  </tr>
  <tr>
    <td>担当</td>
    <td>鈴木</td>
  </tr>
</table>

rowspanの注意点

セルの省略

rowspanを使った場合、結合された範囲の2行目以降では該当するセルを記述しません。

<tr>
  <td rowspan="2">A</td>  <!-- 2行分のセル -->
  <td>B1</td>
</tr>
<tr>
  <!-- ここに<td>A</td>は書かない -->
  <td>B2</td>
</tr>

colspanとrowspanを組み合わせる

複雑な表の作成

colspanとrowspanを同時に使うと、より複雑で情報豊富な表を作成できます。

売上データ表の例

<table border="1">
  <tr>
    <th rowspan="2">地域</th>
    <th colspan="4">四半期売上</th>
    <th rowspan="2">合計</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
    <th>Q4</th>
  </tr>
  <tr>
    <td rowspan="3">関東</td>
    <td>100万</td>
    <td>120万</td>
    <td>110万</td>
    <td>130万</td>
    <td>460万</td>
  </tr>
  <tr>
    <td>150万</td>
    <td>140万</td>
    <td>160万</td>
    <td>170万</td>
    <td>620万</td>
  </tr>
  <tr>
    <td>90万</td>
    <td>100万</td>
    <td>95万</td>
    <td>105万</td>
    <td>390万</td>
  </tr>
</table>

イベントスケジュール表の例

<table border="1">
  <tr>
    <th rowspan="2">時間</th>
    <th colspan="3">会場</th>
  </tr>
  <tr>
    <th>A会場</th>
    <th>B会場</th>
    <th>C会場</th>
  </tr>
  <tr>
    <td>10:00-12:00</td>
    <td rowspan="2">基調講演<br>（全体）</td>
    <td>ワークショップ1</td>
    <td>展示見学</td>
  </tr>
  <tr>
    <td>13:00-15:00</td>
    <td>ワークショップ2</td>
    <td>懇親会準備</td>
  </tr>
  <tr>
    <td>15:00-17:00</td>
    <td colspan="3">懇親会（全体）</td>
  </tr>
</table>

複雑な結合のコツ

設計の手順

  1. 紙に下書きする：まず表の構造を紙に描く
  2. 行と列を数える：実際のセル数を確認
  3. 結合を計画：どのセルをどの方向に結合するか決める
  4. 少しずつ作成：一度に全部作らず、段階的に構築

デバッグのポイント

  • border=”1″を付ける：開発中は枠線を表示して構造を確認
  • 背景色を付ける：セルの範囲を視覚的に確認
  • バリデーターを使用：HTMLの構文エラーをチェック

よくあるエラーと対処法

表の構造が崩れる場合

原因1：セル数の不一致

<!-- 問題のあるコード -->
<table border="1">
  <tr>
    <td colspan="3">見出し</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <!-- 3列目が不足 -->
  </tr>
</table>

<!-- 修正後 -->
<table border="1">
  <tr>
    <td colspan="3">見出し</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>  <!-- 3列目を追加 -->
  </tr>
</table>

原因2：rowspanでのセル重複

<!-- 問題のあるコード -->
<table border="1">
  <tr>
    <td rowspan="2">A</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>A</td>  <!-- 不要なセル -->
    <td>B2</td>
  </tr>
</table>

<!-- 修正後 -->
<table border="1">
  <tr>
    <td rowspan="2">A</td>
    <td>B1</td>
  </tr>
  <tr>
    <!-- <td>A</td>を削除 -->
    <td>B2</td>
  </tr>
</table>

デバッグ用のCSS

開発中は以下のCSSを使うと構造が見やすくなります：

table {
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #333;
  padding: 8px;
  text-align: center;
}

/* セルに色を付けて確認 */
td[colspan] {
  background-color: #ffeb3b;
}

td[rowspan] {
  background-color: #ff9800;
}

CSSを使ったスタイリング

基本的なスタイリング

きれいな表の作り方

table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

th {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  padding: 12px;
  text-align: center;
}

td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #f5f5f5;
}

レスポンシブ対応

/* スマホ対応 */
@media screen and (max-width: 768px) {
  table {
    font-size: 14px;
  }
  
  th, td {
    padding: 8px 4px;
  }
  
  /* 横スクロール対応 */
  .table-container {
    overflow-x: auto;
  }
}

結合セルの装飾

結合セルを目立たせる

/* colspanを使ったセル */
td[colspan], th[colspan] {
  background-color: #e3f2fd;
  font-weight: bold;
  border: 2px solid #2196f3;
}

/* rowspanを使ったセル */
td[rowspan], th[rowspan] {
  background-color: #f3e5f5;
  font-weight: bold;
  border: 2px solid #9c27b0;
}

実践的な活用例

企業サイトでよく使う表

料金比較表

<table class="pricing-table">
  <tr>
    <th rowspan="2">プラン</th>
    <th colspan="3">機能</th>
    <th rowspan="2">価格</th>
  </tr>
  <tr>
    <th>基本機能</th>
    <th>高度機能</th>
    <th>サポート</th>
  </tr>
  <tr>
    <td>フリー</td>
    <td>○</td>
    <td>×</td>
    <td>×</td>
    <td>無料</td>
  </tr>
  <tr>
    <td>ベーシック</td>
    <td>○</td>
    <td>○</td>
    <td>×</td>
    <td>月額1,000円</td>
  </tr>
  <tr>
    <td>プレミアム</td>
    <td>○</td>
    <td>○</td>
    <td>○</td>
    <td>月額2,000円</td>
  </tr>
</table>

営業時間・定休日表

<table class="schedule-table">
  <tr>
    <th colspan="2">営業時間</th>
  </tr>
  <tr>
    <td rowspan="2">平日</td>
    <td>9:00 - 18:00</td>
  </tr>
  <tr>
    <td>（土曜日は17:00まで）</td>
  </tr>
  <tr>
    <td>日曜・祝日</td>
    <td>定休日</td>
  </tr>
</table>

ECサイトの商品仕様表

<table class="product-spec">
  <tr>
    <th colspan="2">商品仕様</th>
  </tr>
  <tr>
    <td rowspan="3">サイズ</td>
    <td>幅: 30cm</td>
  </tr>
  <tr>
    <td>奥行: 20cm</td>
  </tr>
  <tr>
    <td>高さ: 15cm</td>
  </tr>
  <tr>
    <td>重量</td>
    <td>1.2kg</td>
  </tr>
  <tr>
    <td rowspan="2">材質</td>
    <td>外側: プラスチック</td>
  </tr>
  <tr>
    <td>内側: ステンレス</td>
  </tr>
</table>

アクセシビリティの配慮

スクリーンリーダー対応

headers属性の使用

<table>
  <tr>
    <th id="category" rowspan="2">カテゴリ</th>
    <th id="q1">Q1</th>
    <th id="q2">Q2</th>
  </tr>
  <tr>
    <td headers="category q1">100万</td>
    <td headers="category q2">120万</td>
  </tr>
</table>

scope属性の使用

<table>
  <tr>
    <th scope="col" colspan="2">売上データ</th>
  </tr>
  <tr>
    <th scope="row">東京</th>
    <td>100万円</td>
  </tr>
</table>

キーボードナビゲーション

/* フォーカス可能にする */
td[tabindex], th[tabindex] {
  outline: 2px solid #4CAF50;
}

/* フォーカス時のスタイル */
td:focus, th:focus {
  background-color: #fff3cd;
  border: 2px solid #856404;
}

まとめ

今回はHTMLでテーブル（表）のセルを結合する方法を詳しく紹介しました。

重要なポイント

基本的な使い方

  • colspan：横にセルをまとめたいとき（列の結合）
  • rowspan：縦にセルをまとめたいとき（行の結合）
  • 両方の組み合わせ：複雑な表構造も自由に作成可能

実装のコツ

  • 設計を事前に行う：紙に下書きしてから作成
  • 段階的に構築：少しずつ作って確認
  • デバッグ用CSS：開発中は枠線を表示して構造確認

注意すべき点

  • セル数の一致：各行の列数を正しく保つ
  • 重複の回避：rowspan使用時はセルを省略
  • アクセシビリティ：スクリーンリーダーへの配慮

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました