HTML 入門

HTML テーブルのセマンティック化

テーブルは、ウェブページ上でデータを整理し表示するための強力な手段です。
基礎的な <table>、<tr>、<th>、<td> タグだけでもシンプルなテーブルは作成できますが、<thead>、<tbody>、<tfoot> 要素を使用することで、セマンティック（Semantic）な構造を提供し、アクセシビリティを高め、スタイルの制御能力を強化できます。

これらの要素はテーブルの異なるパーツを定義するのに役立ち、ブラウザ、検索エンジン、および補助技術（Assistive Technology）がテーブルの内容をより正確に理解することを可能にします。

1. テーブルのセマンティック構造を理解する

<thead>、<tbody>、<tfoot> 要素はテーブルにセマンティックな構造を与え、以下の 3 つの異なるセクションに分割します。

  • <thead> (表頭): テーブルの見出し行を含みます。通常はカラム（列）の見出しが含まれ、各列にどのようなデータが入っているかを記述します。
  • <tbody> (表体): テーブルの主要なデータを含みます。一つのテーブルに複数の <tbody> 要素を持たせることができ、関連する行をグループ化するのに非常に便利です。
  • <tfoot> (表脚): テーブルのデータに関連する集計情報や計算結果を含みます。合計、平均値、またはその他の関連情報を含めることができます。

1.1 なぜこれが重要なのか？

これらの要素を使用するのは、単に見た目のためではなく、データの構造に「意味」を与えるためです。このセマンティックな明確さは、以下のメリットをもたらします。

  • スタイル制御: テーブルの各セクションに対して特定の CSS スタイルを適用できるため、視覚的にヘッダー、メイン、フッターを簡単に区別できます。
  • メンテナンス性: 構造が明確になることで、HTML コードの可読性が高まり、特に複雑なテーブルにおいてメンテナンスが容易になります。
  • JavaScript によるインタラクション: JavaScript を使用して、テーブルの特定のセクションをターゲットに動的な更新や操作を行うことができます。
  • アクセシビリティ (Accessibility): スクリーンリーダーなどの補助技術は、これらの要素を使用してテーブル構造をより良く理解し、障害を持つユーザーに正確に情報を伝えることができます。

2. 実戦：<thead>、<tbody>、<tfoot> を使う

それでは、実際にこれらの要素をどのように実装するかを見ていきましょう。

2.1 基本構造

これらの要素を使用したテーブルの基本構造は以下の通りです。

<table>
  <thead>
    <tr>
      <th>見出し 1</th>
      <th>見出し 2</th>
      <th>見出し 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ 1</td>
      <td>データ 2</td>
      <td>データ 3</td>
    </tr>
    <tr>
      <td>データ 4</td>
      <td>データ 5</td>
      <td>データ 6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>フッター 1</td>
      <td>フッター 2</td>
      <td>フッター 3</td>
    </tr>
  </tfoot>
</table>

解析：

  • <thead> は 1 行 (<tr>) と 3 つのヘッダーセル (<th>) を含みます。
  • <tbody> は 2 行のデータを含み、各行には 3 つのデータセル (<td>) があります。
  • <tfoot> は集計データを表す 1 行と 3 つのセルを含みます。

2.2 詳細な例：月間売上レポート

売上データを表示する、より詳細な例を見てみましょう。

<table>
  <caption>月間売上レポート</caption>
  <thead>
    <tr>
      <th>月</th>
      <th>製品</th>
      <th>売上高</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1月</td>
      <td>コンポーネント A</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>1月</td>
      <td>コンポーネント B</td>
      <td>$150</td>
    </tr>
    <tr>
      <td>2月</td>
      <td>コンポーネント A</td>
      <td>$120</td>
    </tr>
    <tr>
      <td>2月</td>
      <td>コンポーネント B</td>
      <td>$180</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">合計</th>
      <td>$550</td>
    </tr>
  </tfoot>
</table>

解析：

  • <caption> を追加してテーブルにタイトルを提供しました。
  • <thead> でカラムの見出しを定義しました。
  • <tbody> に実際の売上データを格納しました。
  • <tfoot> で総売上高を表示し、colspan 属性を使って「合計」の見出しが 2 カラム分またがるようにしました。

2.3 複数の <tbody> 要素の使用

複数の <tbody> 要素を使用することで、テーブル内で関連する行をグループ化できます。例えば、月ごとに売上データをグループ化する場合：

<table>
  <caption>月間売上レポート</caption>
  <thead>
    <tr>
      <th>月</th>
      <th>製品</th>
      <th>売上高</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="2">1月</th>
      <td>コンポーネント A</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>コンポーネント B</td>
      <td>$150</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th rowspan="2">2月</th>
      <td>コンポーネント A</td>
      <td>$120</td>
    </tr>
    <tr>
      <td>コンポーネント B</td>
      <td>$180</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">合計</th>
      <td>$550</td>
    </tr>
  </tfoot>
</table>

解析：

  • 2 つの <tbody> 要素を使用して、1月と 2月のデータをそれぞれグループ化しました。
  • 「月」の見出しに rowspan 属性を使用し、各 <tbody> 内で 2 行分またがるように設定しました。

3. CSS によるスタイリング

<thead>、<tbody>、および <tfoot> 要素は、CSS を使用して簡単にスタイリングできます。

<style>
  thead {
    background-color: #f0f0f0; /* 薄いグレーの背景 */
  }
  tfoot {
    background-color: #e0e0e0; /* 少し濃いグレーの背景 */
    font-weight: bold;         /* 太字 */
  }
</style>

この CSS コードにより：

  • <thead> の背景色が薄いグレーになります。
  • <tfoot> の背景色が少し濃いグレーになり、テキストが太字になります。

4. まとめ

本セクションでは、<thead>、<tbody>、および <tfoot> タグについて学びました。

  • これらの要素は、テーブル構造にセマンティックな意味を与えます。
  • アクセシビリティ、SEO、およびコードのメンテナンス性を向上させます。
  • CSS によるスタイリングや JavaScript による操作をより容易にします。