<tfoot> - テーブルフッタ

2009.12.11

構文

<table>
    <caption>・・・</caption>
    <thead>
        ：
    </thead>
    <tfoot>
        ：
    </tfoot>
    <tbody>
        ：
    </tbody>
</table>

説明文

　<table>タブで構成した表は3つの部分に分けて表を作成できる。メインとなる表は<tbody>タブ内に記述する。<tfoot>タブはメインとなる表の下部に付加する事ができるタブである。例えば，メインの表の合計を表示するなどといった場合に利用できる。ブラウザによっては<tfoot>を常に表示しておき<tbody>の部分をスクロールして表示するといった事も可能となる。

　<tfoot>の記載位置は<tbody>タブより前に記載しておく必要がある。

　また，メインとなる表の上に付加する表には<tfoot>タブを利用する。

サンプル

HTMLソース

<table border=1 width=250 align=center>
 <caption>【テーブルの例】</caption>
 <thead>
  <tr bgcolor="#800000" style="color:#ffffff;">
    <th>Name</th>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
 </thead>
 <tfoot>
  <tr bgcolor="#ffffa0">
    <th>合計</th>
    <th>120</th>
    <th>150</th>
    <th>180</th>
  </tr>
 </tfoot>
 <tbody>
 <tr align=center>
  <th>行-1</th>
  <td>10</td>
  <td>20</td>
  <td>30</td>
 </tr>
 <tr align=center>
  <th>行-2</th>
  <td>40</td>
  <td>50</td>
  <td>60</td>
 </tr>
 <tr align=center>
  <th>行-3</th>
  <td>70</td>
  <td>80</td>
  <td>90</td>
 </tr>
 </tbody>
</table>

ブラウザ表示例

【テーブルの例】
Name	列1	列2	列3
合計	120	150	180
行-1	10	20	30
行-2	40	50	60
行-3	70	80	90

対応状況

HTML			IE		Firefox		Opera
4 strict	4 Transitional	5	6	7	2	3	8	9
○	○	○	○	○	○	○	○	○

要素，タグ

タグ要素	テーブル要素
包括可能要素	<tr>（必須）
タグ記述条件	開始タグ：必須　終了タグ：省略可

属性

よく利用する属性

属性	意味	対応
属性	意味	HTML 4s	HTML 4t	その他
align=配置位置	セル内の横方向における内容の配置位置を指定する。「left」で左揃え，「center」で中央揃え，「right」で右揃え，「justify」でセル内に均等になるように配置する。また，「char」を指定するとchar属性に従った配置を行う	○	○
valign=valign	セル内の縦方向における内容の配置位置を指定する。「top」でセルの上辺に揃え，「bottom」でセルの下辺に揃える。「middle」でセルの中央に配置する。また，「baseline」を指定すると，セル内の1行目をベース・ラインで揃える	○	○
bgcolor=色	セル内の背景色を指定する。redやblueなどといった色名を指定できる。また，色の3原色を256階調（00からff）で指定することも可能。この際，「#赤緑青」の順に指定する。例えば，黄色であれば「#ffff00」と指定する	×	○

その他の属性

属性意味対応

HTML 4s HTML 4t その他

char=文字セル内の内容を揃えるベースとなる文字を指定する。例えば，小数をセル内で利用している場合は，「.」を指定することで，桁数を合わせることができる ○ ○ 　

charoff=文字数 char属性で指定した文字から指定した文字分ずらした位置で揃える。例えば，小数点2桁目で揃えたい場合は「charoff="2"」と指定すればよい ○ ○ 　

class=クラス名このタグのクラス名。CSSでスタイルを指定する場合などに利用される ○ ○ 　

dir=方向タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に，rtlを指定すると「右から左」に表示する。しかし，多くのWebブラウザでは，文字コードを自動判別し，自動的に表示方向を決定している。そのため，日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する ○ ○ 　

id=ID タグのID。ダイナミックHTMLでタグを操作する場合や，Java Scriptでのタグの制御，個別にスタイルを指定する場合などに利用する ○ ○ 　

lang=言語タグ内に記述した言語。例えば，日本語の場合は「ja」，英語の場合は「en」を指定する ○ ○ 　

style=スタイルタグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 ○ ○ 　

title=タイトル

タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは，タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する

○

マウスやキーボードの状況変化に関わる属性

属性	意味	対応
属性	意味	HTML 4s	HTML 4t	その他
onclick=スクリプト	このタグに対応する表示結果にマウスの左ボタンをクリックした場合に，指定したスクリプトを実行する	○	○
ondblclick=スクリプト	このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に，指定したスクリプトを実行する	○	○
onmousedown=スクリプト	このタグに対応する表示結果にマウスのボタンで押下した場合に，指定したスクリプトを実行する	○	○
onmouseup=スクリプト	このタグに対応する表示結果にマウスのボタンを離した場合に，指定したスクリプトを実行する	○	○
onmouseover=スクリプト	このタグに対応する表示結果にマウス・ポインタが乗った場合に，指定したスクリプトを実行する	○	○
onmousemove=script	このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する	○	○
onmouseout=スクリプト	このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する	○	○
onkeypress=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する	○	○
onkeydown=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する	○	○
onkeyup=スクリプト	このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する	○	○

ヘッダ，フッタ，本体の記述順序

　HTMLでは，テーブルの記述をヘッダ（<thead>）→フッタ（<tfoot>）→本体（<tbody>）の順に記述することとなっている。ヘッダ（<thead>）→本体（<tbody>）→フッタ（<tfoot>）の順に記述しがちなため注意が必要だ。

<table>
  <thead>
    <tr>
      <td>ヘッダ部分</td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>フッタ部分</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>本体部分</td>
    </tr>
  </tbody>
</table>