テーブル(<TABLE>)の行はその機能により、
ヘッダ(<THEAD>~</THEAD>)・ボディ(<TBODY>~</TBODY>)・
フッタ(<TFOOT>~</TFOOT>)に分けられます。
表のヘッダ・ボディ・フッタを定義しておくことで、正式対応したブラウザが登場した際には、
ヘッダとフッタを固定表示したままボディ部分のみをスクロールさせることが可能になるようです。
ソース中では、
<THEAD>~</THEAD>→
<TFOOT>~</TFOOT>→
<TBODY>~</TBODY>の順序で記述するよう定義されています。
これはヘッダとフッタを先読みして表示するためですが、
これらのタグに対応していないNetscape Navigator4等では、
そのままフッタをボディより上に表示してしまうので注意が必要です。
<table border=”1″ width=”500″ cellspacing=”0″ cellpadding=”5″ bordercolor=”#333333″>
<thead>
<tr>
<th bgcolor=”#EE0000″><font color=”#FFFFFF”>メニュー</font></th>
<th bgcolor=”#EE0000″ width=”150″><font color=”#FFFFFF”>説明</font></th>
<th bgcolor=”#EE0000″ width=”200″><font color=”#FFFFFF”>豆知識</font></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”3″ bgcolor=”#CCCCCC” align=”right”>パスタ倶楽部</td>
</tr>
</tfoot>
<tbody>
<tr>
<td bgcolor=”#99CC00″ align=”right” nowrap>カルボナーラ</td>
<td bgcolor=”#FFFFFF” valign=”top” width=”150″>玉子とベーコンとクリームソースのパスタ</td>
<td bgcolor=”#FFFFFF” valign=”top” width=”200″>カルボナーラとは炭焼き職人という意味</td>
</tr>
<tr>
<td bgcolor=”#99CC00″ align=”right” nowrap>ペスカトーレ</td>
<td bgcolor=”#FFFFFF” valign=”top” width=”150″>エビとあさりの漁師風パスタ</td>
<td bgcolor=”#FFFFFF” valign=”top” width=”200″>ペスカトーレは漁師風という意味</td>
</tr>
</tbody>
</table>
メニュー | 説明 | 豆知識 |
---|---|---|
パスタ倶楽部 | ||
カルボナーラ | 玉子とベーコンとクリームソースのパスタ | カルボナーラとは炭焼き職人という意味 |
ペスカトーレ | エビとあさりの漁師風パスタ | ペスカトーレは漁師風という意味 |