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

<tfoot>タグは、テーブル(表)における列の要約を構成するフッタ行(table foot)を表します。

またテーブル(表)の作成の仕方によっては、各行グループを<thead>(テーブルヘッダ)、<tbody>(テーブルボディ)、<tfoot>(テーブルフッタ)の3つに分類することができます。 これらの要素は必ずしも必要というわけではなく、省略する事もできますが、指定する事でテーブルの構造がより明確に表せるでしょう。

tfoot要素は、<caption>、<colgroup>、<thead>、<tbody>よりも後に配置します。 もしくはtbody要素よりも前に配置します。 HTML4.01の場合は、thead→tfoot→tbodyの順番で記述するのが正しいとされていましたが、HTML5ではtfoot要素は、tbody要素より後ろに配置しても問題ありません。 ですが、tfoot要素をどの位置に記述しても、表の一番最後にフッタが表示されます。

なおtfoot要素は、<table>~</table>内に1つだけ入れる事ができます。

HTML5での変更点

HTML5のtfoot要素では、align属性、valign属性、char属性、charoff属性が廃止されています。 またtfoot要素内へのtr要素の配置は必須ではなくなりました。

HTML5.01の場合は、tbody要素の前にtfoot要素は配置できなくなったので注意して下さい。

書式

  • <tfoot 属性="値">~</tfoot> ……… 表のフッタ行を定義

使用した時の例

<table border=1>
<caption>テーブル(表)のサンプル</caption>
 <thead>
  <tr>
    <th>商品</th>
    <th>販売実績</th>
    <th>在庫数</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>リンゴ</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>缶詰</td>
    <td>200</td>
    <td>10</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
    <th>合計</th>
      <td>300</td>
      <td>110</td>
  </tr>
 </tfoot>
</table>

ブラウザ上の表示例

テーブル(表)のサンプル
商品 販売実績 在庫数
リンゴ 100 100
缶詰 200 10
合計 300 110

対応ブラウザなどのデータ

形式 <tfoot>~</tfoot> カテゴリ なし
親要素 table 子要素 tr,script,template
開始タグ 省略可能 終了タグ 省略可能
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~