HTML Living Standard/tbody

tbody 要素

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

基本構造

<tbody> 要素は、通常 <thead> や <tfoot> と一緒に使用されます。<tbody> 内には、1 行以上のデータ行（<tr> 要素）を含め、それぞれのセル（<td> または <th> 要素）にデータを配置します。

基本構造の例：

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田中 太郎</td>
      <td>30</td>
      <td>エンジニア</td>
    </tr>
    <tr>
      <td>山田 花子</td>
      <td>25</td>
      <td>デザイナー</td>
    </tr>
  </tbody>
</table>

使用例

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Table with Tbody Example</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>商品名</th>
          <th>価格</th>
          <th>在庫</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>テレビ</td>
          <td>50,000円</td>
          <td>在庫あり</td>
        </tr>
        <tr>
          <td>冷蔵庫</td>
          <td>70,000円</td>
          <td>在庫なし</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

スタイリング

CSS を使用して <tbody> 要素のデータ行にスタイルを適用することができます。以下にスタイリングの例を示します：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Styled Tbody Example</title>
    <meta charset="UTF-8">
    <style>
      tbody tr:nth-child(even) {
        background-color: #f9f9f9;
      }
      tbody tr:nth-child(odd) {
        background-color: #ffffff;
      }
      td {
        padding: 10px;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>日付</th>
          <th>天気</th>
          <th>最高気温</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>2025-01-01</td>
          <td>晴れ</td>
          <td>15℃</td>
        </tr>
        <tr>
          <td>2025-01-02</td>
          <td>曇り</td>
          <td>10℃</td>
        </tr>
        <tr>
          <td>2025-01-03</td>
          <td>雨</td>
          <td>8℃</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

アクセシビリティ

<tbody> 要素を使用することで、スクリーンリーダーを利用するユーザーにとって表の構造がわかりやすくなります。特に、以下の点に注意してください：

表全体の構造を <thead>、<tbody>、<tfoot> を適切に分けて記述すること。
表のデータ行を明確に定義し、セル内の内容を簡潔に記述すること。

練習問題

練習1: 自分が訪れたことのある国について、国名、訪問した年、印象に残ったことを記載した表を作成し、<tbody> を使用してください。
練習2: CSS を使用して、<tbody> の各行に交互の背景色を適用してください。
練習3: <thead>、<tbody>、<tfoot> を適切に使った表を設計し、スクリーンリーダーでも適切に読み上げられる構造を作成してください。

tbody 要素

基本構造

使用例

スタイリング

アクセシビリティ

関連仕様

練習問題