<TBODY>テーブルにボディ部分を設定

THEAD要素、TBODY要素、TFOOT要素は、テーブル(<TABLE>)の横列(TR要素)をグループ化するための要素です。

テーブル(表)の横列の並びは、ヘッダ、ボディ(本体)、フッタという3つの構造にグループ化することができます。 グループ化したい部分がテーブルのヘッダであれば<THEAD>~</THEAD>、テーブルの本体部分であれば<TBODY>~</TBODY>、テーブルのフッタであれば<TFOOT>~</TFOOT>内に記述します。

なおこれらのようにグループ化する事で、そのグループに対してスタイルシートや属性をまとめて指定できるようになります。 他にもヘッダとフッタを固定したまま本体部分をスクロールさせることや、複数のページに渡るような長いテーブルを印刷する際に、ヘッダとフッタを各ページに印刷させることなども可能になるようです。 ただしこれらはブラウザの対応次第となります。

またこれらのタグを使用する場合は、ソース中で必ず<THEAD><TFOOT>、<TBODY>の順番で記述するようにして下さい。 これはどの程度の長さかわからないボディよりも先にヘッダとフッタを先読みして表示できるようにするためです。 ですが、TFOOT要素に未対応のブラウザ(Netscape Navigator4など)の場合は、そのままフッタをボディより前に表示してしまいますので、注意して下さい。

なお各要素を配置できる数は<TBODY>が複数可能、<THEAD><TFOOT>が一つのテーブル(表)に対しひとつずつのみ配置可能となっています。

ちなみにTHEAD要素とTFOOT要素がなく、TBODY要素が一つのみの場合は、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>ハーゲンダッツミニカップ(バニラ)</td><td>280円</td><td>残り50個</td>
  </tr>
  <tr>
     <td>ハーゲンダッツミニカップ(パンプキン)</td><td>240円</td><td>残り3個</td>
  </tr>
</tbody>
</table>

ブラウザ上の表示例

商品価格在庫数
更新日2016/12/18
ハーゲンダッツミニカップ(バニラ)280円残り50個
ハーゲンダッツミニカップ(パンプキン)240円残り3個

属性

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

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

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

HTML5での状況と関連情報

align、char、charoff、valign属性はHTML5では廃止。tfoot要素とtbody要素の配置する位置は、どちらが先でもよくなった。