YUGIEN 遊戯苑 — 学ぶ・理解する
テーマ

HTML / 要素

tfoot要素の使い方

tfoot要素は、表の合計やまとめを表す行をひとまとまりにします。ページ全体の一番下にある「フッター」とは別のものです。

先に結論

表に合計などのまとめの行があるときは、その行をtfootに入れます。表の見出し部分にはthead、主なデータにはtbodyを使います。

tfootは合計を自動で計算しません。表示したい値はHTMLやJavaScriptで用意します。まとめの行がない表に、無理に追加する必要もありません。

小さな例

<table>
  <caption>くだものの在庫</caption>
  <thead>
    <tr><th scope="col">品目</th><th scope="col">個数</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">りんご</th><td>3個</td></tr>
    <tr><th scope="row">なし</th><td>2個</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">合計</th><td>5個</td></tr>
  </tfoot>
</table>
くだものの在庫
品目個数
りんご3個
なし2個
合計5個

「合計」は行の見出しなのでth scope="row"にし、値の「5個」はtdにしています。tfootはこの行をまとめる役目で、計算はしていません。

theadやtbodyとの違い

  • theadは、列の見出しなどを含む行をまとめます。
  • tbodyは、表の主なデータを含む行をまとめます。
  • tfootは、表の合計やまとめを含む行をまとめます。

HTMLでは、ふつうtfootを表のデータ行の後に書きます。使える場所は表の構造で決まり、好きな場所へ置ける汎用の区切りではありません。

よくある間違い

  • tfootを書けば合計を計算してくれると思う。数値の計算は別に行います。
  • ページ全体の下部を作る要素だと思う。tfootは表の中の行グループです。
  • まとめの行の文字をすべてtfootに入れる。行はtr、見出しセルはth、値はtdに入れます。
  • まとめの行がない表にも必ず必要だと思う。tfootは省略できます。

関連ページ

行の前に列をまとめる方法はcolgroup要素の使い方を参照してください。