tfoot

提供: ASCII.jp HTMLリファレンス

ver.8~ ver.7~ ver.14~ ver.5.1~ ver.11.5~
意味 表の最後の見出し
読み方 ティーフット/テーブル・フッター

カテゴリー

なし

親にできる要素/カテゴリー

以下の条件を満たす箇所
  • table要素の子要素として
    • caption/colgroup/thead要素の後で、かつtbody/tr要素の前
    • caption/colgroup/thead/tbody/tr要素の後
  • table要素の子孫に他のtfoot要素がないこと

子にできる要素/カテゴリー

0個以上のtr要素

<tfoot 属性="値">~</tfoot>

グローバル属性

accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title

説明

 tfoot要素は、列の要約(フッター)を構成する行のブロックを示します。

 tfoot要素の中に、tr要素を複数回入れて、複数行に渡るフッターも作れます。

サンプル

(body要素の内部)

<table border="1">
<thead>
<tr><th>番号</th><th>氏名</th><th>住所</th><th>電話番号</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>山田 太郎</td><td>東京都新宿区若松町X-XX</td><td>03-1234-XXXX</td></tr>
<tr><td>2</td><td>鈴木 花子</td><td>神奈川県横浜市港北区菊名X-XX-XX</td><td>045-234-XXXX</td></tr>
<tr><td>3</td><td>高橋 和夫</td><td>埼玉県さいたま市浦和区駒場X-XX-XX</td><td>048-345-XXXX</td></tr>
</tbody>
<tfoot>
<tr><th>番号</th><th>氏名</th><th>住所</th><th>電話番号</th></tr>
</tfoot>
</table>

(スタイルシート)

thead, tfoot { background-color : #000099; color : #ffffff }
tbody { background-color : #ccffff }

サンプル実行画像

よくある間違い、勘違い

 HTML4の仕様では、thead、tbody、tfoot要素の順番は、thead→tfoot→tbodyと決められていました。HTML5では、tfoot要素をtbody要素の後に書いてもよいことになりました。

Powered by Web Professional

目次