2013-03-15 10 views
11

HTMLテーブルについて学んだとき、tbody、thead、tfoot、colgroupについて教えられませんでした。あなたはいつそれらを使うのですか?私はW3Schoolsのサイトに行って、どのように動作するのか理解していますが、いつ使用するのか、使用しないのかはわかりません。いつtbody、colgroup、theadなどをHTMLテーブルで使用するのですか?

+10

W3Schoolを使用しないようにしてください。理由は - http://w3fools.com – Terry

+2

MDNにはこれらの要素に関する情報があります:https://developer.mozilla.org/en/docs/HTML/Element/tbody –

+0

http://www.w3.org /TR/html401/struct/tables.html –

答えて

8

テーブルに関する追加情報を提供し、テーブル内のコンテンツを整理する場合に使用します。テーブルの視覚的なレンダリングにはいくつかの方法で影響を与えることができます(ただし、これはブラウザによって異なる場合があります)。たとえば、/<col>のサポートはです。パッチイです。

たとえば、上部と下部にヘッダー行がある場合は、それぞれ<thead><tfoot>にグループ化し、データ行は<tbody>にグループ化します。ブラウザでは、<tbody>または<tr>の要素の前後に配置するかどうかにかかわらず、常に<tfoot>が下部に表示されます。また、テーブルに格納されているデータの量はテーブルの行数が多い場合に便利です:

<table> 
    <caption>High Scores</caption> 
    <thead> 
    <tr><th>#</th><th>Name</th><th>Score</th></tr> 
    </thead> 
    <tfoot> 
    <tr><th>#</th><th>Name</th><th>Score</th></tr> 
    </tfoot> 
    <tbody> 
    <tr><td>1</td><td>Alice</td><td>10000</td></tr> 
    <tr><td>2</td><td>Bob</td><td>9000</td></tr> 
    <tr><td>3</td><td>Carol</td><td>8500</td></tr> 
    <tr><td>4</td><td>Dave</td><td>8000</td></tr> 
    <!-- Up to 100 data rows --> 
    </tbody> 
</table> 

そうでない場合は、デフォルトではすべての行が(あなたがテーブル内<tbody></tbody>タグを明示的に利用していない場合でも)単一<tbody>にグループ化されています。あなたがテーブルの下にある行をヘッダしている場合はそのため、あなたは彼らが最後に表示されるようにするために、表の一番下にそれらを配置する必要があります:

<table> 
    <caption>High Scores</caption> 
    <tr><th>#</th><th>Name</th><th>Score</th></tr> 

    <tr><td>1</td><td>Alice</td><td>10000</td></tr> 
    <tr><td>2</td><td>Bob</td><td>9000</td></tr> 
    <tr><td>3</td><td>Carol</td><td>8500</td></tr> 
    <tr><td>4</td><td>Dave</td><td>8000</td></tr> 
    <!-- Up to 100 data rows --> 

    <tr><th>#</th><th>Name</th><th>Score</th></tr> 
</table> 

そしてもちろん、これはまた、それを作りますおそらくそれほどセマンティックではありません。それはあなたがいずれかを使用している場合<tfoot>は、アップに以前の仕様で前に任意の<tbody><tr>要素を配置し、そのためのHTML 4とXHTML 1を含むことを必要であることを


注意それらの型に対して妥当性を確認する。これはもはやHTML5の時点では当てはまりません。

+0

colgroupはどうですか?どのようにtheadと相互作用する? –

関連する問題