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

html

「このセルを横に2つ分まとめたい」
「ここは縦に結合して見やすくしたい」
「会社の料金表みたいに、きれいな表を作りたい」

ホームページに表（テーブル）を作るとき、こんなふうに思ったことはありませんか？

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

この記事では、HTMLのテーブルでセルを結合する方法を、初心者にもわかりやすく解説します。これを読めば、見た目のきれいな表を自分で自由に作れるようになりますよ。

スポンサーリンク

テーブルの基本を理解しよう

HTMLテーブルの構成要素

まず、テーブルの基本的な構成を確認しましょう：

<table>
  <tr>  <!-- 行（Table Row） -->
    <th>見出し1</th>  <!-- 見出しセル（Table Header） -->
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>  <!-- データセル（Table Data） -->
    <td>データ2</td>
  </tr>
</table>

基本的な表の例

<table border="1">
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
    <td>あり</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>80円</td>
    <td>なし</td>
  </tr>
</table>

これが基本的な3列×3行のテーブルです。ここから結合の技術を学んでいきましょう。

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

colspanとは？

colspan は「カラム（列）をいくつ分まとめるか」を指定する属性です。

基本的な使い方

見出しを2列分にまとめる例

<table border="1">
  <tr>
    <th colspan="2">商品情報</th>
    <th>在庫状況</th>
  </tr>
  <tr>
    <td>商品名</td>
    <td>価格</td>
    <td>在庫数</td>
  </tr>
  <tr>
    <td>りんご</td>
    <td>100円</td>
    <td>50個</td>
  </tr>
</table>

結果の表示

  • 1行目：「商品情報」が2列分の幅、「在庫状況」が1列分
  • 2行目以降：「商品名」「価格」「在庫数」が並ぶ

実用的な使用例

料金表での活用

<table border="1">
  <tr>
    <th rowspan="2">プラン</th>
    <th colspan="3">料金（税込）</th>
  </tr>
  <tr>
    <th>月額</th>
    <th>年額</th>
    <th>割引率</th>
  </tr>
  <tr>
    <td>ベーシック</td>
    <td>1,000円</td>
    <td>10,000円</td>
    <td>17%OFF</td>
  </tr>
  <tr>
    <td>プレミアム</td>
    <td>2,000円</td>
    <td>20,000円</td>
    <td>17%OFF</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-11:00</td>
    <td>13:00-14:00</td>
    <td>14:00-15:00</td>
  </tr>
  <tr>
    <td>月曜日</td>
    <td>会議</td>
    <td>企画</td>
    <td>開発</td>
    <td>テスト</td>
  </tr>
</table>

colspanの数値の考え方

<!-- 3列のテーブルで全体を結合 -->
<tr>
  <th colspan="3">タイトル（3列分）</th>
</tr>

<!-- 一部だけ結合 -->
<tr>
  <th colspan="2">見出し（2列分）</th>
  <td>普通のセル</td>
</tr>

重要なポイント

  • colspan="2"は「2列分の幅を取る」という意味
  • その行の他のセルの数も調整が必要

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

rowspanとは？

rowspan は「ロー（行）をいくつ分まとめるか」を指定します。

基本的な使い方

カテゴリを2行分にまとめる例

<table border="1">
  <tr>
    <th rowspan="2">果物</th>
    <td>りんご</td>
    <td>100円</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>80円</td>
  </tr>
  <tr>
    <th rowspan="2">野菜</th>
    <td>にんじん</td>
    <td>150円</td>
  </tr>
  <tr>
    <td>たまねぎ</td>
    <td>120円</td>
  </tr>
</table>

結果の表示

  • 「果物」が2行分の高さで表示
  • 「野菜」も2行分の高さで表示

実用的な使用例

成績表での活用

<table border="1">
  <tr>
    <th rowspan="2">生徒名</th>
    <th colspan="3">教科</th>
    <th rowspan="2">総合点</th>
  </tr>
  <tr>
    <th>国語</th>
    <th>数学</th>
    <th>英語</th>
  </tr>
  <tr>
    <td rowspan="1">田中太郎</td>
    <td>85</td>
    <td>90</td>
    <td>78</td>
    <td>253</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>92</td>
    <td>88</td>
    <td>95</td>
    <td>275</td>
  </tr>
</table>

組織図での活用

<table border="1">
  <tr>
    <th rowspan="3">技術部</th>
    <td>フロントエンド</td>
    <td>田中</td>
  </tr>
  <tr>
    <td>バックエンド</td>
    <td>佐藤</td>
  </tr>
  <tr>
    <td>インフラ</td>
    <td>鈴木</td>
  </tr>
  <tr>
    <th rowspan="2">営業部</th>
    <td>国内営業</td>
    <td>山田</td>
  </tr>
  <tr>
    <td>海外営業</td>
    <td>高橋</td>
  </tr>
</table>

colspanとrowspanを組み合わせる

複雑な表の作成

<table border="1">
  <tr>
    <th rowspan="2">部門</th>
    <th rowspan="2">役職</th>
    <th colspan="3">四半期売上（万円）</th>
    <th rowspan="2">年間合計</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td rowspan="2">営業部</td>
    <td>部長</td>
    <td>500</td>
    <td>520</td>
    <td>480</td>
    <td>1500</td>
  </tr>
  <tr>
    <td>主任</td>
    <td>300</td>
    <td>320</td>
    <td>310</td>
    <td>930</td>
  </tr>
  <tr>
    <td colspan="2">合計</td>
    <td>800</td>
    <td>840</td>
    <td>790</td>
    <td>2430</td>
  </tr>
</table>

複雑な結合の設計方法

ステップ1：基本構造を決める

まず、結合なしの基本的な表を設計します：

<!-- 基本構造（結合前） -->
<table border="1">
  <tr>
    <th>部門</th>
    <th>役職</th>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
    <th>合計</th>
  </tr>
</table>

ステップ2：結合箇所を決める

どのセルを結合するかを決めて、設計図を作ります：

|部門(縦2)|役職|Q1|Q2|Q3|合計(縦2)|
|--------|---|--|--|--|--------|
|        |主任|  |  |  |        |

ステップ3：HTMLに反映

設計図をもとに、colspanとrowspanを設定します。

よく使われる結合パターン

パターン1：L字型の見出し

<table border="1">
  <tr>
    <th rowspan="2">商品</th>
    <th colspan="2">サイズ</th>
  </tr>
  <tr>
    <th>S</th>
    <th>M</th>
  </tr>
  <tr>
    <td>Tシャツ</td>
    <td>1,000円</td>
    <td>1,200円</td>
  </tr>
</table>

パターン2：十字型の見出し

<table border="1">
  <tr>
    <th colspan="2"></th>
    <th colspan="2">2025年</th>
  </tr>
  <tr>
    <th colspan="2">商品</th>
    <th>上半期</th>
    <th>下半期</th>
  </tr>
  <tr>
    <th rowspan="2">食品</th>
    <td>りんご</td>
    <td>100</td>
    <td>120</td>
  </tr>
  <tr>
    <td>みかん</td>
    <td>80</td>
    <td>90</td>
  </tr>
</table>

テーブル結合の注意点とトラブルシューティング

よくある間違いとその対処法

間違い1：セル数の不一致

問題のあるコード

<table border="1">
  <tr>
    <td colspan="2">A</td>  <!-- 2列分 -->
  </tr>
  <tr>
    <td>B</td>  <!-- 1列分しかない -->
  </tr>
</table>

正しいコード

<table border="1">
  <tr>
    <td colspan="2">A</td>  <!-- 2列分 -->
  </tr>
  <tr>
    <td>B</td>
    <td>C</td>  <!-- 2列分に合わせる -->
  </tr>
</table>

間違い2：rowspanでのセル重複

問題のあるコード

<table border="1">
  <tr>
    <td rowspan="2">A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>A</td>  <!-- ← 不要（rowspanで結合済み） -->
    <td>C</td>
  </tr>
</table>

正しいコード

<table border="1">
  <tr>
    <td rowspan="2">A</td>
    <td>B</td>
  </tr>
  <tr>
    <!-- Aは前の行で2行分指定済みなので不要 -->
    <td>C</td>
  </tr>
</table>

デバッグのコツ

方法1：段階的に構築

<!-- ステップ1：基本の表 -->
<table border="1">
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>D</td><td>E</td><td>F</td></tr>
</table>

<!-- ステップ2：colspanを追加 -->
<table border="1">
  <tr><td colspan="2">A-B</td><td>C</td></tr>
  <tr><td>D</td><td>E</td><td>F</td></tr>
</table>

<!-- ステップ3：rowspanも追加 -->
<table border="1">
  <tr><td colspan="2">A-B</td><td rowspan="2">C-F</td></tr>
  <tr><td>D</td><td>E</td></tr>
</table>

方法2：Excel等での事前設計

複雑な表は、ExcelやGoogleスプレッドシートで先に作成してから、HTMLに移すと間違いが少なくなります。

ブラウザ開発者ツールでの確認

<!-- CSSで結合部分を可視化 -->
<style>
[colspan] { background-color: #ffcccc; }
[rowspan] { background-color: #ccffcc; }
[colspan][rowspan] { background-color: #ccccff; }
</style>

CSSでテーブルを美しくする

基本的なスタイリング

table {
  border-collapse: collapse;  /* 線を結合 */
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #333;
}

tr:nth-child(even) {
  background-color: #f9f9f9;  /* 縞模様 */
}

結合セルの特別なスタイル

/* colspan使用セルのスタイル */
.header-group {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  font-weight: bold;
}

/* rowspan使用セルのスタイル */
.category-cell {
  background-color: #2196F3;
  color: white;
  vertical-align: middle;
  text-align: center;
  writing-mode: vertical-rl;  /* 縦書き */
}

レスポンシブ対応

@media (max-width: 768px) {
  table {
    font-size: 14px;
  }
  
  th, td {
    padding: 8px 10px;
  }
  
  /* 複雑な結合テーブルをスマホで横スクロール */
  .complex-table {
    overflow-x: auto;
    white-space: nowrap;
  }
}

実際の使用例とベストプラクティス

会社の組織図

<table class="org-chart">
  <tr>
    <th colspan="3">株式会社サンプル</th>
  </tr>
  <tr>
    <th rowspan="2">経営陣</th>
    <td>代表取締役</td>
    <td>田中太郎</td>
  </tr>
  <tr>
    <td>取締役</td>
    <td>佐藤花子</td>
  </tr>
  <tr>
    <th rowspan="3">部門長</th>
    <td>技術部長</td>
    <td>山田次郎</td>
  </tr>
  <tr>
    <td>営業部長</td>
    <td>鈴木三郎</td>
  </tr>
  <tr>
    <td>人事部長</td>
    <td>高橋四郎</td>
  </tr>
</table>

商品比較表

<table class="comparison-table">
  <tr>
    <th rowspan="2">機能</th>
    <th colspan="3">プラン</th>
  </tr>
  <tr>
    <th>ベーシック</th>
    <th>スタンダード</th>
    <th>プレミアム</th>
  </tr>
  <tr>
    <td>ユーザー数</td>
    <td>最大5人</td>
    <td>最大20人</td>
    <td>無制限</td>
  </tr>
  <tr>
    <td>ストレージ</td>
    <td>10GB</td>
    <td>100GB</td>
    <td>1TB</td>
  </tr>
  <tr>
    <td rowspan="2">サポート</td>
    <td>メール</td>
    <td>メール・チャット</td>
    <td>24時間電話対応</td>
  </tr>
  <tr>
    <td colspan="3">すべてのプランで日本語対応</td>
  </tr>
</table>

時間割表

<table class="schedule-table">
  <tr>
    <th rowspan="2">時限</th>
    <th rowspan="2">時間</th>
    <th colspan="5">曜日</th>
  </tr>
  <tr>
    <th>月</th>
    <th>火</th>
    <th>水</th>
    <th>木</th>
    <th>金</th>
  </tr>
  <tr>
    <td>1</td>
    <td>9:00-10:30</td>
    <td>数学</td>
    <td>英語</td>
    <td>国語</td>
    <td>理科</td>
    <td>社会</td>
  </tr>
  <tr>
    <td colspan="2">昼休み（12:00-13:00）</td>
    <td colspan="5">全学年共通</td>
  </tr>
</table>

アクセシビリティを考慮したテーブル

スクリーンリーダー対応

<table>
  <caption>2025年第1四半期売上実績</caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">部門</th>
      <th scope="colgroup" colspan="3">月別売上（万円）</th>
      <th scope="col" rowspan="2">合計</th>
    </tr>
    <tr>
      <th scope="col">1月</th>
      <th scope="col">2月</th>
      <th scope="col">3月</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">営業部</th>
      <td>500</td>
      <td>520</td>
      <td>480</td>
      <td>1,500</td>
    </tr>
  </tbody>
</table>

重要な属性

  • scope="col": 列の見出し
  • scope="row": 行の見出し
  • scope="colgroup": 複数列の見出し
  • scope="rowgroup": 複数行の見出し
  • caption: テーブルの説明

SEOに配慮したテーブル

構造化データのマークアップ

<table itemscope itemtype="https://schema.org/Table">
  <caption itemprop="about">商品価格比較表</caption>
  <tr>
    <th scope="col">商品名</th>
    <th scope="col">価格</th>
    <th scope="col">評価</th>
  </tr>
  <tr itemscope itemtype="https://schema.org/Product">
    <td itemprop="name">商品A</td>
    <td itemprop="price">1,000円</td>
    <td itemprop="rating">★★★★☆</td>
  </tr>
</table>

ページ内リンクとの連携

<h2 id="price-table">料金表</h2>
<table aria-labelledby="price-table">
  <!-- テーブル内容 -->
</table>

まとめ

HTMLでテーブルのセルを結合する方法をマスターするポイントは以下の通りです：

基本的な使い方

  • 横の結合には colspan を使用
  • 縦の結合には rowspan を使用
  • 数値は「何列（何行）分の幅を取るか」を指定

設計のコツ

  • まず基本構造を決めてから結合を考える
  • 複雑な表はExcel等で事前に設計
  • 段階的に構築してデバッグ

実用的な活用

  • 料金表や比較表での見出し結合
  • 組織図やスケジュール表での分類
  • CSSと組み合わせて美しいデザイン

注意点

  • セル数の不一致に注意
  • アクセシビリティを考慮した属性設定
  • レスポンシブ対応での表示確認

Youtube

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

スポンサーリンク

コメント

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