Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

colspan / rowspan

『colspan』は複数の列をまたぐセル結合、『rowspan』は複数の行をまたぐセル結合を行う属性です。列のグループ化には『<colgroup>』と『<col>』を使います。

構文

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

属性・タグ一覧

属性 / タグ	概要
colspan	セルが横方向（列方向）に何列分を占めるかを数値で指定します。『<td>』・『<th>』に使います。
rowspan	セルが縦方向（行方向）に何行分を占めるかを数値で指定します。『<td>』・『<th>』に使います。
<colgroup>	テーブルの列グループを定義します。複数の列に一括でCSSを適用したいときに使います。
<col>	『<colgroup>』の中で個別の列を表します。『span』属性で複数列をまとめて指定できます。

サンプルコード

<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』をご覧ください。