レンタルサーバー検索 - ネットショップ開業から趣味のHPまで、
用途にあわせて最適のサーバーを探そう!

ホームページは難しくない  ちょこっとHTML  Lesson7

<thead> 〜 </thead>
<tfoot> 〜 </tfoot>
<tbody> 〜 </tbody>

テーブルのタグは 通常 <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>

ホームページは難しくない  ちょこっとHTML  Lesson7

当ホームページは リンクフリーです! 
Copyright (C) 2005. mamoho. All Rights Reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます。