9月
19

HTMLテーブルタグの概要その2。ヘッダー、ボディ、フッターの3要素。

基本的なテーブルの構成は、HTMLテーブルタグの概要で説明したとおりです。
実は、さらに細かく各要素の役割を定義することができます。
テーブルをヘッダ部、ボディ部、フッター部の3つの部分に分けることができます。
これにより、さらに明確なテーブル構造となります。



テーブルヘッダ、ボディ、フッター

テーブルはヘッダ部とボディ部、フッター部にわけることができます。
それぞれを図に表すと次の通り。

ヘッダー部ヘッダー部ヘッダー部
フッター部フッター部フッター部
ボディ部ボディ部ボディ部
ボディ部ボディ部ボディ部
ボディ部ボディ部ボディ部

具体的な使い方

上記の説明だけではなんだかよくわからない人もおおいかもしれません。
例えば、テストの成績表などを作る場合はこういった使いかたができるでしょう。

国語算数理科
平均80点80点60点
田中君98点84点79点
高橋さん65点82点54点
宮本君75点75点46点
ヘッダー、フッター、ボディとうまく使い分けるとスタイルシートを適用する場合にも非常に便利です。
適切な使い方をすれば検索エンジンにもわかりやすいテーブルとなり、SEOにも効果的です。

HTMLコードの書き方

詳しい内容は各項目のページを参照してください。
<thead>と<tfoot>は先に読み込むことになっているので、
これらは<tbody>よりも先に書くように定義されています。
そのため、通常は
<thead>
<tfoot>
<tbody>
の順で書くことになっています。
先ほどの表をコードで表すと次のようになります。
<table>
<thead><tr><th></th><th>国語</th><th>算数</th><th>理科</th></tr></thead>
<tfoot><tr><th>平均</th><td>80点</td><td>80点</td><td>60点</td></tr></tfoot>
<tbody>
<tr><th>田中君</th><td>98点</td><td>84点</td><td>79点</td></tr>
<tr><th>高橋さん</th><td>65点</td><td>82点</td><td>54点</td></tr>
<tr><th>宮本君</th><td>75点</td><td>75点</td><td>46点</td></tr>
</tbody>
</table>

3 Comments to “HTMLテーブルタグの概要その2。ヘッダー、ボディ、フッターの3要素。”

Leave a comment

↓サーバーを借りるなら↓
サーバーについてはこちら


↓ドメインをとるなら↓
ドメインについてはこちら

↓ネットショップを始めるなら↓

人気の記事