HTML

The <tfoot> element is an HTML element that groups footer rows—such as totals and notes—at the end of a table.

tfoot 要素

• <tfoot> とは何か
• 基本構造と配置ルール
• サンプルコード：最小構成
• 実践コード：集計行を持つ表
• アクセシビリティとセマンティクス
• CSSスタイリングのコツ
• 固定（sticky）フッターの実装
• JavaScript で動的に値を挿入
• 印刷／PDF 出力時の再表示設定
• よくある落とし穴とアンチパターン
• FAQ（開発者向け Q&A）
• まとめ

<tfoot> とは何か

役割

表（<table>）のフッター（総計・備考など）をグループ化する要素。

仕様

<thead>・<tbody>・<tfoot> は 行グループ (row group) で、スクリーンリーダーやブラウザはそれぞれを別々に認識し、先頭・本文・末尾を論理的に区別する。

表示位置

ページ上では常に表の最下部に描画されるが、マークアップ上は表の前半（<thead> の後）に置くことが推奨される。理由は後述の ストリーミング描画 で高速化できるため。

基本構造と配置ルール

<table>
	<caption>月別売上</caption>
	<thead> … </thead>

	<!-- 先に tfoot -->
	<tfoot>
		<tr>
			<th scope="row">合計</th>
			<td>¥1,200,000</td>
			<td>¥1,340,000</td>
			<td>¥1,280,000</td>
		</tr>
	</tfoot>

	<!-- 後に tbody -->
	<tbody> … </tbody>
</table>

配置順

thead → tfoot → tbody が推奨（W3C と WHATWG 仕様）。フッターを先に読むことで、「ブラウザが表の末尾までダウンロード/解析しなくてもフッターをすぐ描画」でき、特に大規模テーブルで初期表示が速くなる。

子要素

直下に置けるのは <tr> のみ。各行のセルは <td> または <th> を使用する。フッター内セルは 見出し の機能が必要なら <th> とし、scope="row" を付けると支援技術で正しく読まれる。

属性

<tfoot> 独自の属性はない。**グローバル属性( id, class, data-* など )**が使用可能。

サンプルコード：最小構成

<table>
	<thead><tr><th>製品</th><th>価格</th></tr></thead>

	<tfoot>
		<tr>
			<th scope="row">平均</th>
			<td>¥3,200</td>
		</tr>
	</tfoot>

	<tbody>
		<tr><td>りんご</td><td>¥3,000</td></tr>
		<tr><td>みかん</td><td>¥3,400</td></tr>
	</tbody>
</table>

<tfoot> を使うだけで 論理構造が明示的 になる。

CSS で tfoot { background: #f8f9fa; } などとすると、フッターだけを簡単に着色できる。

実践コード：集計行を持つ表

以下は「四半期別売上」の実例。

<table class="sales">
	<caption>2025 年度四半期売上</caption>
	<thead>
		<tr>
			<th>部門</th><th>Q1</th><th>Q2</th><th>Q3</th><th>Q4</th>
		</tr>
	</thead>

	<tfoot>
		<tr>
			<th scope="row">総計</th>
			<td colspan="4" class="total"></td>
		</tr>
		<tr>
			<td colspan="5" class="note">※単位：百万円</td>
		</tr>
	</tfoot>

	<tbody>
		<tr><th scope="row">EC</th><td>148</td><td>152</td><td>160</td><td>171</td></tr>
		<tr><th scope="row">店舗</th><td>95</td><td>104</td><td>98</td><td>110</td></tr>
		<tr><th scope="row">法人</th><td>55</td><td>62</td><td>60</td><td>65</td></tr>
	</tbody>
</table>

<td colspan="4"> でセル結合。

補足行を追加して備考や単位を入れられる。

.total セルは JavaScript で後述のように自動計算も可能。

アクセシビリティとセマンティクス

scope 属性

<th scope="row">総計</th> のように行ヘッダを明確にし、スクリーンリーダーが「この行は縦方向の見出し」と認識できる。

列ヘッダの関連付け

複数列を束ねた総計セルには colspan を使い、headers 属性までは不要（単純なケース）。

ARIA ランドマーク

特別な role は不要だが、複合表を作る場合は <tfoot role="rowgroup"> を明示しても良い。

キーボード操作

固定（sticky）フッターにフォーカス可能な要素（ボタン等）を置く場合、tabindex="0" と focus-visible のスタイル調整を忘れない。

CSSスタイリングのコツ

table.sales {
	width: 100%;
	border-collapse: collapse;
}

thead {
	background: #0d6efd;
	color: #fff;
}

tfoot {
	background: #f1f3f5;
	font-weight: 600;
}

tbody tr:nth-child(even) {
	background: #fafafa;
}

tfoot td.total {
	text-align: right;
	font-size: 1.1rem;
}

グループ単位で色分けすると可読性が大幅アップ。

border-collapse: collapse; と th, td { padding: 0.5em; } の組み合わせで表全体をスッキリ。

tfoot td:last-child や .sales tfoot tr:first-child などで細かい選択も可能。

固定（sticky）フッターの実装

長大なテーブルでも集計行を常に表示したい場合

.sales tbody {
	display: block;
	height: 360px;
	overflow: auto;
}
.sales thead tr,
.sales tfoot tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}
.sales thead {
	background: #0d6efd;
	position: sticky;
	top: 0;
	z-index: 1;
}
.sales tfoot {
	background: #f1f3f5;
	position: sticky;
	bottom: 0;
}

display: block; の tbody でスクロール領域を作成。

ヘッダーとフッターは position: sticky; で固定。

Chrome, Firefox, Safari, Edge で動作。IE は非対応（2025 年現在）。

JavaScript で動的に値を挿入

/* 四半期ごとに列合計を計算し、tfoot 内 .total に出力 */
const table  = document.querySelector("table.sales");
const tfootCell = table.querySelector("td.total");
const rows   = table.tBodies[0].rows;

let sum = 0;
for (const row of rows) {
	for (let i = 1; i < row.cells.length; i++) {
		sum += Number(row.cells[i].textContent);
	}
}
tfootCell.textContent = sum.toLocaleString("ja-JP") + " 百万円";

解析対象は table.tBodies[0] とすると tbody が複数あっても安全。

Intl.NumberFormat を用いると、通貨・言語ごとの桁区切りを自動化できる。

イベントドリブンにしたい場合は MutationObserver を使ってセル変更を監視し、再計算するとリアルタイム性が上がる。

印刷／PDF 出力時の再表示設定

ブラウザ印刷では <tfoot> が 各ページ末尾 に自動で再表示されることが多いが、モダンブラウザでは以下の CSS が必要な場合がある

@media print {
	thead { display: table-header-group; }  /* ヘッダー繰り返し */
	tfoot { display: table-footer-group; }  /* フッター繰り返し */
}

table-header-group / table-footer-group は印刷用レイアウト指示。

一部 PDF 出力エンジン (wkhtmltopdf など) は <tfoot> を無視するため、フッター行を文書末尾に複製する fallback が必要。

よくある落とし穴とアンチパターン

<tfoot> を tbody の後ろに置く

初期レンダリングが遅延しパフォーマンス低下

<thead> → <tfoot> → <tbody> に変更

<tfoot> 内で <td rowspan> を多用

複数ページ印刷で崩れやすい

rowspan は最小限に。装飾は CSS で行う

フッターに <button> など操作 UI を置く

キーボードフォーカスの順序が複雑

tabindex と focus-visible スタイルを調整し、UI は必要最小限に

CSS で tfoot { display:none; }

読み上げ機器が合計行を認識できなくなる

代わりに visibility:hidden や DOM 外部化で非表示処理

FAQ（開発者向け Q&A）

tfoot に summary 属性はある？

ない。総括テキストは <caption> や外部見出しで補完する。

複数 tfoot は使える？

HTML 仕様上は 1 つ。複数必要なら <tbody class="footer"> など別 tbody を作り、CSS で差別化を。

tfoot をレスポンシブ表で折りたたみたい

<details><summary> をフッター内に入れる or JavaScript で display:none/block を切替え。

データテーブル系ライブラリとの相性

DataTables.js, Handsontable 等は tfoot を自動認識し集計行として利用できる。プラグイン側設定を確認。

まとめ

• <tfoot> は表の“最後”を論理的に示す要素。合計・備考・集計結果をまとめ、UI・アクセシビリティ双方でメリット大。
• 配置順は <thead> → <tfoot> → <tbody> が最適。大規模データでも初期表示を高速化。
• CSS で 視覚的に差別化し、position: sticky で 常時表示、JS で 動的集計も容易。
• 印刷では display: table-footer-group 指定で各ページ末尾に自動反映。
• アンチパターン（順序誤り・無意味な rowspan 乱用）を避け、意味づけと可読性を揃えると、初学者にも中級者にも読みやすいテーブルが完成する。

これらを押さえれば、<tfoot> は単なる飾りではなく 「表データを正確・高速・アクセシブルに届ける」強力な武器 になります。ぜひ積極的に活用してみてください。