テーブルのタグは 通常 <tr> 〜 </tr> で 行を表しますが、その行に対して
グループ分けを設定することができます。
一番上の行は <thead> ヘッダ部分、
一番下の行は <tfoot> フッタ部分、
その間の行は <tbody> 本体、という感じです。
グループ分けされた部分は それぞれにまとめて設定を行うことができます。
また テーブルをグループ分けすることで 今後 ヘッダの部分、フッタの部分は
固定しておいてボディの部分がスクロールする。とか 長いテーブルを印刷する時
に それぞれのページにヘッダ フッタを付けることなどができるようになると言
われています
。
<tbody> は テーブルの本体で 複数行の指定ができますが、いずれの場合でも
必ず <thead> <tfoot> <tbody> という順序で設定するようにしましょう。 これは テーブル本体の部分が表示されるよりも先に フッタ部分を表示させる
ようにするためです。
では さっそくやってみましょう。
ヘッダ |
ヘッダ |
フッタ |
フッタ |
ボディ |
ボディ |
ボディ |
ボディ |
ボディ |
ボディ |
ヘッダの部分は 背景色を #99ff99
フッタの部分は 背景色を #ff99ff
ボディの部分は 背景色を #ffff99 にしてみました。
HTMLソースはこんな感じです。
<table width="200" border="1">
<thead bgcolor="#99FF99">
<tr>
<td width="100">ヘッダ</td>
<td width="100">ヘッダ</td>
</tr>
</thead>
<tfoot bgcolor="#FF99FF">
<tr>
<td>フッタ</td>
<td>フッタ</td>
</tr>
</tfoot>
<tbody bgcolor="#FFFF99">
<tr>
<td>ボディ</td>
<td>ボディ</td>
</tr>
<tr>
<td>ボディ</td>
<td>ボディ</td>
</tr>
<tr>
<td>ボディ</td>
<td>ボディ</td>
</tr>
</tbody>
</table> |
|