<tbody> - テーブル本体部ホームページ制作京都｜ホームページ作成のリュウム

ＷＥＢ用語(N)

<tbody> - テーブル本体部

概要

形式	<tbody>～</tbody>
サポート	H4s～ / e4
タグの省略	開始タグ：省略可能、終了タグ：省略可能
包含可能要素	tr

説明

テーブルの行を、ヘッダ、フッタ、ボディに分ける際のボディを記述します。ブラウザが対応していれば、ヘッダとフッタを常に表示したまま、ボディのみをスクロールさせるといったことが可能になりますが、実際にそこまで対応しているブラウザは少ないようです。

属性

【固有属性】

属性	意味
align=align	H4s/e4/N6。表示位置を指定します。　　center：中央表示（H4/e4）　　char：指定文字揃え（H4）　　justify：均等割付（H4）　　left：左寄せ（H4/e4）　　right：右寄せ（H4/e4）
bgcolor=color	e4/N6。背景色を指定します。
char=char	H4s。位置揃えする文字を指定します。
charoff=n	H4s。char 属性で指定した文字を、セルの左端からどのくらいの位置に表示するかのオフセットを指定します。
valign=valign	H4s/e4/N6。セルの中に表示される縦位置を指定します。　　baseline：ベースライン（H4/e4）　　bottom：下側（H4/e4）　　middle：中央（H4/e4）　　top：上側（H4/e4）

【一般属性】

属性	意味
class=class	H4s/e4/N6。クラスを指定します。
dir=dir	H4s/e5/N6。文字の表示方向を指定します。
id=id	H4s/e4/N6。IDを指定します。
lang=lang	H4s/e4/N6。言語を指定します。
language=language	e4。スクリプト言語を指定します。
style=style	H4s/e4/N6。スタイルシートを指定します。
title=title	H4s/e4/N6。タイトルを指定します。

使用例

HTMLソース

<table border=1>
 <caption>【表の例】</caption>
 <colgroup span=1>
 <colgroup span=3 align=right>
 <thead bgcolor="#cccccc">
  <tr>
   <th>品名</th><th>単価</th><th>個数</th><th>価格</th>
  </tr>
 </thead>
 <tfoot bgcolor="#cccccc">
  <tr>
   <th>合計</th><td><br></td><td><br></td><td>5,600</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>ぬいぐるみ</td><td>3,200</td><td>1</td><td>3,200</td>
  </tr>
  <tr>
   <td>チョコレート</td><td>800</td><td>3</td><td>2,400</td>
  </tr>
 </tbody>
</table>

ブラウザ表示例(※)

【表の例】
品名	単価	個数	価格
ぬいぐるみ	3,200	1	3,200
チョコレート	800	3	2,400
合計			5,600

※ 未対応ブラウザのために、別の方法を用いて表現しています。

<tbody> と <tfoot> の順番の注意

ヘッダとフッタを先読みして表示するために、<tbody> よりも <tfoot> の方を先に記述しなくてはならないと定義されています。

<table>
 <thead><tr><td>HEAD</td></tr></thead>
 <tfoot><tr><td>FOOT</td></tr></tfoot>
 <tbody><tr><td>BODY</td></tr></tbody>
</table>

しかし、上記のように記述すると、IE5.0 などでは HEAD → BODY → FOOT の順に表示するのですが、Netscape Communicator 4.0など、<tfoot> に未対応のブラウザでは、HEAD → FOOT → BODY の順に表示されてしまいます。