colspan / rowspan

<table>
  <tr>
    <!-- 2列分を結合 -->
    <td colspan="2">横方向に結合したセル</td>
  </tr>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
</table>

sample_colspan_rowspan.html

<table border="1">
  <!-- 列グループ（1列目を灰色に） -->
  <colgroup>
    <col style="background-color: #eee;">
    <col span="2">
  </colgroup>

  <caption>時間割</caption>
  <thead>
    <tr>
      <th scope="col">時限</th>
      <th scope="col">月曜</th>
      <th scope="col">火曜</th>
      <th scope="col">水曜</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1限</th>
      <!-- colspan="2" で月・火をまとめる -->
      <td colspan="2">HTML入門</td>
      <td>CSS入門</td>
    </tr>
    <tr>
      <th scope="row">2限</th>
      <td>JavaScript</td>
      <!-- rowspan="2" で2・3限の火曜をまとめる -->
      <td rowspan="2">PHP入門</td>
      <td>Swift入門</td>
    </tr>
    <tr>
      <th scope="row">3限</th>
      <td>Python</td>
      <!-- rowspan で結合済みのため火曜のセルは省略 -->
      <td>自習</td>
    </tr>
  </tbody>
</table>

「時間割」という見出しのテーブルが表示されます。1限の月・火曜が「HTML入門」として横結合（colspan="2"）され、2・3限の火曜が「PHP入門」として縦結合（rowspan="2"）されます。また、1列目（時限列）が灰色の背景色になります。

サンプルページはこちら

セル結合はテーブルの構造を複雑にするため、結合したセルの数だけ後続の行・列からセルを省略する必要があります。たとえば『colspan="2"』のセルを使った行では、その列に対して次の列のセルを1つ削除します。『rowspan="2"』のセルを使った行では、次の行でそのセルに対応する位置のセルを削除します。書き間違えるとレイアウトが大きく崩れるので、実際に表の設計図（表の形）を紙に書いてから実装すると分かりやすいです。

『<colgroup>』と『<col>』を使うと、列単位でCSSを適用できます。たとえば特定の列の背景色を変えたり、幅を指定したりするのに便利です。これらは必ず『<caption>』の直後・『<thead>』より前に配置します。

テーブルの基本構造については 『table / tr / td / th』 を、グループ化については 『thead / tbody / tfoot / caption』 をご覧ください。

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

12.1 以降 ○

11.1 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

colspanとrowspanを使ったテーブルは、設計を誤るとHTMLが壊れます。以下の点に注意してください。

<!-- 3列×3行のテーブルでcolspanとrowspanを使う例 -->
<table border="1">
  <thead>
    <tr>
      <th scope="col">商品</th>
      <!-- colspan="2" で「月別売上」が2列にまたがる -->
      <th scope="colgroup" colspan="2">月別売上</th>
    </tr>
    <tr>
      <!-- 上のtr内でcolspan="2"のthがあるため、ここには2列分のthを書く -->
      <th scope="col">（空白）</th>
      <th scope="col">1月</th>
      <th scope="col">2月</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- rowspan="2" で「東京店」が2行にまたがる -->
      <th scope="rowgroup" rowspan="2">東京店</th>
      <td>¥120,000</td>
      <td>¥135,000</td>
    </tr>
    <tr>
      <!-- rowspan="2"のthがあるため、このtrにはtdが2つしかない -->
      <td>¥98,000</td>
      <td>¥110,000</td>
    </tr>
  </tbody>
</table>

複雑なセル結合では、事前にスプレッドシートなどでテーブルの形を視覚的に確認してから、HTMLを書くことをおすすめします。