HTML Living Standard/tfoot

tfoot 要素

<tfoot> 要素は、HTML 表（<table> 要素）のフッタ部分を定義するために使用されます。この要素は、表の最下部に配置されるデータの集計情報や要約情報を示すために利用され、表の内容をよりわかりやすく、整理された形で表示できます。

基本構造

<tfoot> 要素は、通常、<thead>（表のヘッダー）および <tbody>（表のデータ部分）と一緒に使用されます。<tfoot> 内には、集計行（<tr>）を含め、集計結果や要約のデータを示すことが一般的です。

基本的な構造の例：

<table>
  <thead>
    <tr>
      <th>商品</th>
      <th>価格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>テレビ</td>
      <td>50,000円</td>
      <td>2</td>
    </tr>
    <tr>
      <td>冷蔵庫</td>
      <td>80,000円</td>
      <td>1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">合計</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

使用例

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Table with Tfoot 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>120,000円</td>
          <td>10</td>
        </tr>
        <tr>
          <td>スマートフォン</td>
          <td>80,000円</td>
          <td>20</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合計</td>
          <td>200,000円</td>
          <td>30</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

スタイリング

CSS を使用して <tfoot> 要素をカスタマイズすることができます。例えば、フッタ部分に背景色をつけることができます：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Styled Tfoot Example</title>
    <meta charset="UTF-8">
    <style>
      tfoot {
        background-color: #f1f1f1;
        font-weight: bold;
      }
      tfoot td {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>名前</th>
          <th>評価</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>田中</td>
          <td>80</td>
        </tr>
        <tr>
          <td>山田</td>
          <td>90</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合計</td>
          <td>170</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

アクセシビリティ

<tfoot> 要素は、表における合計や要約情報を示すために使用されることが多く、視覚的に表をより理解しやすくします。また、スクリーンリーダーを使用するユーザーにとっても、表の合計や要約情報が明確に認識できるようになります。

特に、<tfoot> 要素を使うことで、スクリーンリーダーは表のフッター部分を強調し、利用者が全体の情報を把握しやすくなります。

練習問題

練習1: さまざまな商品の価格と数量を含む表を作成し、<tfoot> を使って合計を計算してください。
練習2: 表の合計部分を<tfoot> に移動し、CSS を使って視覚的に強調してください。
練習3: フッタ部分に集計以外の情報を表示した場合、ユーザーにとって最もわかりやすい方法で情報を整理してください。

tfoot 要素

基本構造

使用例

スタイリング

アクセシビリティ

関連仕様

練習問題