HTML Living Standard/thead

THEAD 要素

<thead> 要素は、HTML 表（<table> 要素）のヘッダー行をグループ化するために使用されます。この要素を利用することで、表の構造を明確にし、表全体の可読性やアクセシビリティを向上させることができます。

基本構造

<thead> 要素は、通常 <table> 要素の中で、<tbody> や <tfoot> とともに使用されます。<thead> 内には 1 行以上のヘッダー行（<tr> 要素）を含め、各セル（<th> 要素）に列の見出しを記載します。

基本構造の例：

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫状況</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ノートパソコン</td>
      <td>100,000円</td>
      <td>在庫あり</td>
    </tr>
    <tr>
      <td>スマートフォン</td>
      <td>80,000円</td>
      <td>在庫なし</td>
    </tr>
  </tbody>
</table>

使用例

以下は、<thead> を使用した表の具体的な例です：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Table with Thead Example</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>年度</th>
          <th>売上高</th>
          <th>利益</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>2023年</td>
          <td>10,000,000円</td>
          <td>2,000,000円</td>
        </tr>
        <tr>
          <td>2024年</td>
          <td>12,000,000円</td>
          <td>2,500,000円</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

スタイリング

<thead> 要素を CSS を使ってスタイリングすることが可能です。以下にスタイリングの例を示します：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Styled Thead Example</title>
    <style>
      thead {
        background-color: #f2f2f2;
        font-weight: bold;
        text-align: center;
      }
      th {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>商品カテゴリ</th>
          <th>月間売上</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>家電</td>
          <td>3,000,000円</td>
        </tr>
        <tr>
          <td>衣類</td>
          <td>1,500,000円</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

アクセシビリティ

<thead> 要素を正しく使用することで、スクリーンリーダーを利用するユーザーに表の構造を明確に伝えることができます。特に以下の点に注意してください：

見出しセル（<th>）を適切に使用し、内容が簡潔かつ分かりやすいこと。
必要に応じて scope 属性を使用して、セルが列または行に対応していることを明示する。

練習問題

練習1: あなたの好きな3つの果物について、それぞれの価格と在庫状況を示す表を作成し、<thead> を使用してください。
練習2: CSS を使って <thead> の背景色と文字の太さを変更してください。
練習3: アクセシビリティを考慮し、スクリーンリーダーで適切に読み上げられる表を設計してください。