<tfoot> 表(テーブル)のフッタ行を定義する

取り扱い 現行の標準
カテゴリ なし
親にできる要素 <table>。配置は<caption><colgroup><thead><tbody><tr>の後に許可される
子にできる要素 0個以上の<tr>
対応ブラウザ caniuseで確認

<tfoot>タグの説明

<tfoot>は、表(テーブル)の中でフッター行を定義する際に使用します。ここで言うフッターとは、表の末尾に置かれる統括や合計を表す行のことです。フッターの内容そのものは<td>で指定しますが、それをグループ化する祭に役立ちます。

<tfoot>は、<thead><tbody>と併用することで、有用な意味を提供できます。特に、画面に入り切らないほど長い行を持つ表である場合に、個別の振る舞いを与えることができるため便利です。

テーブルの作成は、以下の流れで行います。

  1. まず<table>で表の作成を開始
  2. 必要であれば<caption>を配置
  3. <tr>で表の行(横軸)を定義
  4. 見出しのセルが必要な場合は<th>を配置
  5. <td>でセルとデータを作成
  6. 必要に応じて<thead>を配置
  7. 必要に応じて<tbody>を配置
  8. 必要に応じて<tfoot>を配置
  9. 列をグループ化する場合<colgroup>を配置
  10. 列に対して一括で属性を指定する場合<col>を配置

<tfoot>タグの特徴

  • テーブルの中の行をまとめます。レイアウトには影響を与えませんが、セルの構造を無視した配置は認められません。
  • CSSのdisplayは、既定値でtable-footer-groupが適用されます。
  • 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
  • 一つの表の中で複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<tfoot>に指定できる主な属性

align(非推奨)
セル内容の水平方向の配置を指定します。スタイルシートを使って下さい。
valign(非推奨)
セル内容の垂直方向の配置を指定します。スタイルシートを使って下さい。
bgcolor(非推奨)
セルの背景色を指定します。スタイルシートを使って下さい。
char(非推奨)
align属性の値にcharを指定した場合にセル内の位置揃えの軸となる文字を指定します。
charoff(非推奨)
char属性で位置揃えの軸となる文字を指定した場合に、その文字から水平方向にどの位置までずらして表示するかを指定します。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<tfoot>の使い方とサンプル

<tfoot>を使う場合、以下のような構造が基本となります。表の中でヘッダー、本体内容、フッターを明確に分けたい時に採用して下さい。

HTML
<table>
	<thead>
		<tr>
			<td>名前</td>
			<td>担当</td>
			<td>クラス</td>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>山本</td>
			<td>会長</td>
			<td>3ーA</td>
		</tr>
		<tr>
			<td>田中</td>
			<td>副会長</td>
			<td>3ーC</td>
		</tr>
		<tr>
			<td>飯田</td>
			<td>書紀</td>
			<td>2ーB</td>
		</tr>
	</tbody>

	<tfoot style="text-align:right;">
		<tr>
			<td colspan="3">2045年4月1日現在</td>
		</tr>
	</tfoot>
</table>
表示確認
名前 担当 クラス
山本 会長 3ーA
田中 副会長 3ーC
飯田 書紀 2ーB
2045年4月1日現在

上記の例は、スタイルシートで装飾しています。

一つの表の中で複数の<tbody>を使うと、以下のようなセクション分割を行うことができます。

HTML
<table class="table_data">
	<thead>
		<tr>
			<th>名前</th>
			<th>担当</th>
			<th>クラス</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<th colspan="3">第十六期</th>
		</tr>
		<tr>
			<td>山本</td>
			<td>会長</td>
			<td>3ーA</td>
		</tr>
		<tr>
			<td>田中</td>
			<td>副会長</td>
			<td>3ーC</td>
		</tr>
		<tr>
			<td>飯田</td>
			<td>書紀</td>
			<td>2ーB</td>
		</tr>
	</tbody>

	<tbody>
		<tr>
			<th colspan="3">第十五期</th>
		</tr>
		<tr>
			<td>岩井</td>
			<td>会長</td>
			<td>3ーC</td>
		</tr>
		<tr>
			<td>渡辺</td>
			<td>副会長</td>
			<td>3ーB</td>
		</tr>
		<tr>
			<td>曽根</td>
			<td>書紀</td>
			<td>2ーA</td>
		</tr>
	</tbody>

	<tbody>
		<tr>
			<th colspan="3">第十四期</th>
		</tr>
		<tr>
			<td>新崎</td>
			<td>会長</td>
			<td>3ーB</td>
		</tr>
		<tr>
			<td>林</td>
			<td>副会長</td>
			<td>3ーA</td>
		</tr>
		<tr>
			<td>大久保</td>
			<td>書紀</td>
			<td>2ーC</td>
		</tr>
	</tbody>

	<tfoot style="text-align:right;">
		<tr>
			<td colspan="3">2045年4月1日現在</td>
		</tr>
	</tfoot>
</table>
表示確認
名前 担当 クラス
第十六期
山本 会長 3ーA
田中 副会長 3ーC
飯田 書紀 2ーB
第十五期
岩井 会長 3ーC
渡辺 副会長 3ーB
曽根 書紀 2ーA
第十四期
新崎 会長 3ーB
副会長 3ーA
大久保 書紀 2ーC
2045年4月1日現在

<tfoot>に関連するHTMLタグ

表(テーブル)を作成する要素
<table> 表(テーブル)を作成する
<caption> 表(テーブル)にキャプションを付ける
<col> 表(テーブル)の縦列の属性をまとめて指定する
<colgroup> 表(テーブル)の縦列をグループ化する
<tr> 表(テーブル)の横一行を定義する
<th> 表(テーブル)の見出しとなるセルを作成する
<td> 表(テーブル)のセルを作成する
<thead> 表(テーブル)のヘッダー行を定義する
<tbody> 表(テーブル)の本体部分を定義する
<tfoot> 表(テーブル)のフッター行を定義する