最終更新日 2021年4月7日

tfoot要素

tfoot要素は、親要素であるtable要素の表に対し、表の総括や結論、集計などのいわゆるフッター情報からなる行の範囲を示します。table要素内でcaption要素、colgroup要素、thead要素の後ろ、そしてtbody要素の前か後ろに記述します。

tfoot要素の終了タグは、直後がtbody要素の場合、またはtfoot要素が親要素内の最終コンテンツである場合に省略可能です。

table要素内に含むことのできるtfoot要素は1つだけです。

HTML5での変更点

・align、background、char、charoff、valignの各属性は廃止されました。

カテゴリ	タグの省略	親要素	子要素
なし	終了タグのみ省略可能	table	tr

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <table>
    <caption>料金表</caption>
    <thead>
      <tr>
        <th>商品名</th>
        <th>料金</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ハンバーガー</td>
        <td>100円</td>
      </tr>
      <tr>
        <td>チーズバーガー</td>
        <td>120円</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>平均単価</td>
        <td>110円</td>
      </tr>
    </tfoot>
  </table>
</body>

参考文献：W3C HTML5「4.9.7 The tfoot element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。