HTML表のフッターをわかりやすく解説！「tfoot」要素の役割と使い方

基本的なしくみ

<thead>、<tbody> 要素よりも後ろに配置する必要があります。
<tr> 要素で構成されます。これらの行は、表の列と同じ構造を持ちますが、フッター情報として解釈されます。
表に 1つだけ 配置できます。
<table> 要素の子要素として配置されます。

「tfoot」の役割

ヘッダーやボディとは異なる情報を強調する
表全体にまたがる集計値などを示す
表の要約や統計情報をわかりやすく表示する

「tfoot」の例

以下の例は、商品の価格表に合計金額を表示する tfoot 要素の使い方を示しています。

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>100円</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>200円</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <th>300円</th>
    </tr>
  </tfoot>
</table>

セルの配置やスタイルなどは、他の <tr> 要素と同様に設定できます。
tfoot 要素は、印刷時にフッター部分を別ページに区切って出力する機能をサポートしています。

「tfoot」の利点

印刷時にフッター部分を別ページに出力できる
ユーザーにとって読みやすい表を作成できる
表の情報をわかりやすく整理できる

<thead>、<tbody> 要素よりも後ろに配置する必要がある
表に 1つだけ しか配置できない

例 1：商品の合計金額を表示

この例は、すでに説明した例と同じですが、ここでは id 属性と class 属性を追加して、スタイリングやスクリプト処理を容易にしています。

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>100円</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>200円</td>
    </tr>
  </tbody>
  <tfoot id="table-footer" class="合計">
    <tr>
      <th>合計</th>
      <th>300円</th>
    </tr>
  </tfoot>
</table>

例 2：各列の合計を表示

この例は、各列の合計を表示する tfoot 要素の使い方を示しています。

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>個数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>100円</td>
      <td>2</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>200円</td>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <th></th>
      <th>5</th>
    </tr>
  </tfoot>
</table>

例 3：統計情報と集計値を表示

この例は、統計情報や集計値を表示する tfoot 要素の使い方を示しています。

<table>
  <thead>
    <tr>
      <th>国名</th>
      <th>人口</th>
      <th>面積</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>日本</td>
      <td>1億2500万人</td>
      <td>37万7975㎢</td>
    </tr>
    <tr>
      <td>アメリカ</td>
      <td>3億3000万人</td>
      <td>937万㎢</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <th>4億5500万人</th>
      <th></th>
    </tr>
    <tr>
      <th>平均</th>
      <th></th>
      <th>628万㎢</th>
    </tr>
  </tfoot>
</table>

例 4：代替テキストとスクリーンリーダー用の情報を表示

この例は、aria-label 属性を使用して、スクリーンリーダー用の情報を表示する tfoot 要素の使い方を示しています。

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>100円</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>200円</td>
    </tr>
  </tbody>
  <tfoot aria-label="表の合計金額">
    <tr>
      <th>合計</th>
      <th>300円</th>
    </tr>
  </tfoot>
</table>

これらの例はほんの一例です。「tfoot」を使用して、さまざまな情報をわかりやすく表示することができます。

JavaScript を使用して、tfoot 要素の動的な更新や操作を行うこともできます。
上記の例では、CSS を使用してスタイルを適用していません。必要に応じて、CSS を追加して外観を調整してください。

CSS を使用してフッターをスタイル設定

最も簡単な代替方法は、CSSを使用して表のフッター部分をスタイル設定する方法です。具体的には、以下のプロパティを使用できます。

text-align: フッター行のテキスト配置を設定
font-weight: フッター行のフォントの太さを設定
background-color: フッター行の背景色を設定
border-bottom: フッター行の下に境界線を引く

以下の例は、CSSを使用してフッター部分をスタイル設定する方法を示しています。

table tbody tr:last-child {
  border-bottom: 2px solid #ccc;
  background-color: #eee;
  font-weight: bold;
  text-align: right;
}

この方法の利点は、シンプルでわかりやすいことです。また、tfoot 要素を使用するよりも柔軟なスタイル設定が可能になります。

欠点

スクリーンリーダーによっては認識されない可能性がある
セマンティックな意味合いが薄くなる

<caption> 要素を使用

<caption> 要素は、表の説明やタイトルを記述するために使用されますが、フッター情報も表示できます。以下の例は、<caption> 要素を使用してフッター情報を表示する方法を示しています。

<table>
  <caption>合計金額</caption>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>100円</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>200円</td>
    </tr>
  </tbody>
</table>

この方法の利点は、セマンティックな意味合いを維持できることです。また、スクリーンリーダーでも認識されやすくなります。

欠点

tfoot 要素ほどスタイリングが柔軟ではない
表構造が少し複雑になる

JavaScript を使用してフッターを生成

JavaScript を使用して、動的にフッターを生成する方法もあります。これは、計算結果や統計情報などをフッターに表示したい場合に有効です。

以下の例は、JavaScriptを使用してフッターを生成する方法を示しています。

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <td>りんご</td>
      <td>100円</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>200円</td>
    </tr>
  </tbody>
</table>

<script>
  // 合計金額を計算してフッター行を生成
  const tbody = document.getElementById('table-body');
  const totalRow = tbody.insertRow();
  const totalCell1 = totalRow.insertCell();
  const totalCell2 = totalRow.insertCell();
  totalCell1.textContent = '合計';

  let total = 0;
  for (const row of tbody.rows) {
    const priceCell = row.cells[1];
    if (priceCell) {
      total += parseInt(priceCell.textContent);
    }
  }
  totalCell2.textContent = total + '円';
</script>

この方法の利点は、柔軟性と動的な更新性が高いことです。

欠点

コードが複雑になる
開発コストが上がる

最適な代替方法の選択

どの代替方法が最適かは、状況によって異なります。以下の点を考慮して選択してください。

開発コスト: 開発コストは、JavaScript を使用する場合は最も高くなります。
柔軟性: JavaScript は、最も柔軟性と動的な更新性が高いです。
セマンティック: <caption> 要素は、セマンティックな意味合いを維持できます。
シンプルさ: CSS を使用したスタイル設定は最もシンプルです。