9月
19

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

By admin // HTML, タグ, テーブル, リファレンス // 3 Comments

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

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

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

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

具体的な使い方

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

	国語	算数	理科
平均	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>

あわせて勉強しておこう

タグ: table, tbody, tfoot, thead, テーブル, フッター, ヘッダー, ボディ

Author:

has written 66 articles for us.

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

HTMLテーブル（表）のヘッダー行を定義するタグ <thead> | 初心者でもわかるホームページの作り方 2010年9月20日 12:25 PM

[...] テーブルにはヘッダー、ボディ、フッター要素を定義することができます。それぞれを区別して定義することで、ブラウザにその役割を明確に伝えることができます。そして、それによりSEOで有利になることも。また、今後のブラウザではより便利な表示がされるかもしれません。スタイルシートの適用の際にも便利なのでぜひ使いましょう。 [...]
HTMLテーブル（表）の本体部分を定義するタグ <tbody> | 初心者でもわかるホームページの作り方 2010年9月20日 12:38 PM

[...] テーブルにはヘッダー、ボディ、フッター要素を定義することができます。それぞれを区別して定義することで、ブラウザにその役割を明確に伝えることができます。テーブルのヘッダー部分を定義する<thead>に続き、本体部分を定義する<thead>を見てみましょう。 [...]
HTMLテーブル（表）のフッター行を定義するタグ <tfoot> | 初心者でもわかるホームページの作り方 2010年9月20日 12:45 PM

[...] テーブルにはヘッダー、ボディ、フッター要素を定義することができます。それぞれを区別して定義することで、ブラウザにその役割を明確に伝えることができます。 HTMLテーブル（表）の本体部分を定義するタグ <tbody>に続き、本体部分を定義する<tfoot>を見てみましょう。 [...]