thead tfoot tbody要素 表ヘッダ、表フッタ、表本体 (table header, table footer, table body)

 
テーブル
ホーム > HTML Note > thead tfoot tbody要素
H4- ie3- N6-

説明

 
<thead | tfoot | tbody>-</thead | tfoot | tbody> 開始タグ:必須(tbody省略可) 終了タグ:省略可
これらの要素は、テーブルの行をヘッダ、フッタ、ボディのグループに分ける要素です。

テーブルの基本形はtable要素tr要素td要素ですが、実はtbody要素が省略されています。tbody要素はtable要素内に配置し、tr要素を包含します。

この要素の記述には決められた順序があります。thead、tfoot、tbodyの順です。また、thead要素、tfoot要素を用いる際には、省略可能な<tbody>も明示的に記述する必要があります。

各行をグループ化させることで、将来的には、ヘッダなどを固定したままボディをスクロール表示できるようになることなどが想定されています。列をグループ化するにはcolgroup要素を使用します。
 

属性 (W3C)

<thead | tfoot | tbodyH4- ie3- N6-
一般属性 id class style title lang dir %events;
align="位置" H4- ie4- N6-
内容の水平表示位置  詳細
left左に表示 (初期値)
center中央に表示
right右に表示
justify両端揃え (複数行テキスト)
char指定文字で揃える
char="文字" H4-
位置揃えする文字
charoff="長さ" H4-
セル左端から文字までの距離
N(px)、S%で指定。
valign="位置" H4- ie4- N6-
内容の垂直表示位置  詳細
top上に表示
middle中央に表示 (初期値)
bottom下に表示
baseline1行目のベースライン揃える
>(tr)+</thead | tfoot | tbody>

ブラウザ独自の属性 (ie N)

bgcolor="色" ie4- N6-
背景色

基本形

データデータ
データデータ
<table border="1">
<tbody>
<tr><td>データ</td><td>データ</td></tr>
<tr><td>データ</td><td>データ</td></tr>
</tbody>
</table>
<table border="1">
<tr><td>データ<td>データ
<tr><td>データ<td>データ
</table>
 

グループの基本形

ヘッダヘッダヘッダ
フッタフッタフッタ
データデータデータ
データデータデータ
<table border="1">
<thead>
  <tr><th>ヘッダ</th><th>ヘッダ</th><th>ヘッダ</th></tr>
</thead>

<tfoot>
  <tr><td>フッタ</td><td>フッタ</td><td>フッタ</td></tr>
</tfoot>

<tbody>
  <tr><td>データ</td><td>データ</td><td>データ</td></tr>
  <tr><td>データ</td><td>データ</td><td>データ</td></tr>
</tbody>

</table>
<table border="1">
<thead>
  <tr><th>ヘッダ<th>ヘッダ<th>ヘッダ
<tfoot>
  <tr><td>フッタ<td>フッタ<td>フッタ
<tbody>
  <tr><td>データ<td>データ<td>データ
  <tr><td>データ<td>データ<td>データ
</table>
thead要素、tfoot要素を用いる際には、省略可能な<tbody>も明示的に記述する必要があります。
 
関連要素: table > caption | colgroup|col | thead|tfoot|tbody> tr > th|td
トップページ HTML Note ページトップ
 2003/06/22発行 2008/10/01更新