HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<tfoot>
テーブルフッター（Table Footer）要素。表のフッター行（集計行など）をグループ化します。
info
概要
<tfoot> 要素は、HTMLの <table> 要素内で使用され、**テーブルのフッター（末尾行）の内容**をグループ化するために使われます。通常、集計、合計、平均、注釈など、テーブル全体のデータに関する要約情報を含む行（<tr>）を格納します。
構造的には、<thead>、<tbody> と同じレベルに配置されますが、ブラウザでの表示順序は**通常、常にテーブルの末尾**になります。
play_circle
デモ (静的表示)
HTML (Source)
<table>
<thead>
<tr>
<th>項目</th><th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>製品A</td><td>1000</td>
</tr>
<tr>
<td>製品B</td><td>2000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>合計</th><td>3000</td>
</tr>
</tfoot>
</table>
Preview (Result)
| 項目 | 金額 |
|---|---|
| 製品A | 1000 |
| 製品B | 2000 |
| 合計 | 3000 |
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| なし | <tfoot> 要素固有の属性はありません。すべてのグローバル属性（class, id, style, data-*など）を使用できます。 |
code
実用例
1. 基本的なテーブル構造での利用
<table>
<caption>販売実績</caption>
<thead>
<tr>
<th>月</th>
<th>売上</th>
</tr>
</thead>
<tfoot>
<tr>
<th>年合計</th>
<td>150,000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1月</td>
<td>10,000</td>
</tr>
<tr>
<td>2月</td>
<td>15,000</td>
</tr>
</tbody>
</table>
2. <tfoot> の後に <tbody> を配置した場合 (表示順序の確認)
<!-- HTMLの記述順序に関わらず、<tfoot>は表の最後にレンダリングされます -->
<table>
<thead> ... </thead>
<tfoot>
<tr><td colspan="2">表のフッター情報</td></tr>
</tfoot>
<tbody> ... </tbody>
</table>
lightbulb
知っておくべき重要事項
description
記述順序と表示順序
HTML仕様では、
HTML仕様では、
<table> の直下には <caption> の後に <thead>、<tfoot>、そして <tbody> の順で出現することが推奨されています。しかし、ブラウザは常に **ヘッダー ($\to$ 本体 $\to$ フッター)** の論理的な順序で表示します。つまり、<tfoot> を <tbody> の前に記述しても、画面上では最後に表示されます。
accessibility_new
アクセシビリティ
<tfoot> を使用することで、スクリーンリーダーなどの支援技術に対して、その行がテーブルのフッター（集計・合計など）であることを明確に伝えることができ、テーブル構造の理解を助けます。