<TFOOT>テーブルにフッタ行を設定

<TABLE>内で利用するthead要素tbody要素、tfoot要素は、いずれもテーブル(表)の横列(tr要素)をグループ化するための要素です。

テーブル(表)の横列の並びは、意味的にヘッダ(<THEAD>)、本体(<TBODY>)、フッタ(<TFOOT>)というように3つにグループ化することができます。 このようにすることで、そのグループに対してスタイルシートや属性をまとめて指定できるほか、ブラウザによってはヘッダとフッタを固定した状態のまま本体部分をスクロールさせることができるようになります。他にも表を印刷する際に、各ページにヘッダとフッタを印刷させることなども可能となります。

これらのタグを利用する場合は、ブラウザにヘッダとフッタを先に認識させるために、HTMLのソース中で必ず<THEAD>~</THEAD>、<TFOOT>~</TFOOT>、<TBODY>~</TBODY>の順序で記述するようにして下さい。 ただしTFOOT要素に未対応のブラウザの場合は、そのままフッタを本体の前に表示してしまいますので、お気を付け下さい。

なおTHEAD要素、TFOOT要素は一つのテーブル内にひとつずつのみ配置可能となっていますが、TBODY要素は複数配置することもできます。

使用した時の例

<table border="2">
<thead>  
  <tr>
     <th>商品</th><th>価格</th><th>在庫数</th>
  </tr>
</thead>
<tfoot>
  <tr>
     <td colspan="3">更新日2016/10/2</td>
  </tr>
</tfoot>
<tbody>
  <tr>
     <td>FLOW NX2-GT FUSION Black</td><td>40,000円</td><td>残り10個</td>
  </tr>
  <tr>
     <td>FLOW NX2 HYBRID Gunmetal</td><td>30,000円</td><td>残り1個</td>
  </tr>
</tbody>
</table>

ブラウザ上の表示例

商品価格在庫数
更新日2016/10/2
FLOW NX2-GT FUSION Black40,000円残り10個
FLOW NX2 HYBRID Gunmetal30,000円残り1個

属性

align="left" セル内の行揃えの位置
  • left・・・左揃え(tdの初期値)
  • right・・・右揃え
  • center・・・中央揃え(thの初期値)
  • justify・・・両端揃え
  • char・・・指定文字揃え
valign="middle" セル内の縦方向の位置
  • top・・・上
  • middle・・・中央(初期値)
  • bottom・・・下
  • baseline・・・横方向の列での1行目のベースライン
char="" 位置を揃える文字の指定
charoff="" セルの左端からどの位置に文字を表示するか指定

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

形式 <tfoot>~</tfoot> カテゴリ なし
親要素 table 子要素 tr / script / template
開始タグ 省略可能 終了タグ 省略可能
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

HTML5では、align、char、charoff、valignの各属性が廃止。またTFOOT要素とTBODY要素を配置する順番は、どちらが前でも良い事になった。