HTMLのテーブルのヘッダーを2行にする方法

HTML CSS

HTMLのテーブルのヘッダーを2行にする方法

テーブルヘッダーを大項目と中項目など、分類を分けたいことがあると思います。
その場合、ヘッダーが2行になりますね。

テーブルヘッダーを2行にするためには、複数行のヘッダーを作成するために、テーブルの構造を工夫する必要があります。
以下にHTMLのサンプルコードを示しながら、その実装方法を説明します。

HTMLファイル（table.html）

<body>
  <table class="test-table">
    <thead>
      <tr>
        <!-- colspanを使用し、2セルにまたがるようにする -->
        <th class="test-header" colspan="2">メインヘッダー1</th>
        <th class="test-header" colspan="2">メインヘッダー2</th>
      </tr>
      <tr>
        <!-- 項目は4セル分 -->
        <th class="test-subheader">サブヘッダー1</th>
        <th class="test-subheader">サブヘッダー2</th>
        <th class="test-subheader">サブヘッダー3</th>
        <th class="test-subheader">サブヘッダー4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="test-cell">データ1</td>
        <td class="test-cell">データ2</td>
        <td class="test-cell">データ3</td>
        <td class="test-cell">データ4</td>
      </tr>
      <tr>
        <td class="test-cell">データ5</td>
        <td class="test-cell">データ6</td>
        <td class="test-cell">データ7</td>
        <td class="test-cell">データ8</td>
      </tr>
    </tbody>
  </table>
</body>

説明

テーブルのヘッダーを2行にするためには、HTMLのtheadセクション内に2つのtr（テーブル行）を作成します。
一行目のtrには、複数のth（テーブルヘッダーセル）を含め、colspan属性を使って横にまたがるセルを作成します。
これにより、ヘッダーの各セクションが2行目のヘッダーセルの上に広がる形になります。
二行目のtr内のthは4セルのため、colspanを使用しないと崩れてしまいます。