htmlテーブル:thead対th


155

(とにかくこのページの例によると)THEADを使用している場合は、THを使用する必要がないように見えます。

本当?もしそうなら、THEAD対THの利点/欠点は何ですか?

回答:


124

<thead>タグは、HTMLテーブルのヘッダのコンテンツ群に使用されます。thead要素は、と組み合わせて使用されるべきであるtbodytfoot要素。

もっと:thead

<thead>行全体をカプセル化して、それらをテーブルヘッダーとして指定するために使用します。仕様によると、

「この分割により、ユーザーエージェントは、テーブルヘッドとフットに関係なく、テーブルボディのスクロールをサポートできるようになります。長いテーブルを印刷すると、テーブルデータを含む各ページでテーブルヘッドとフットの情報が繰り返される場合があります。」

<th>一方、特定のセルを通常のデータセルではなくヘッダーセルとしてスタイルするために使用されます。


22
私はいつも両方を使っています。

11
これは、「More:thead」でリンクした古代のWebサイトの1つです。
masterxilo 2014年

次も参照してください:Mozillaのドキュメントdeveloper.mozilla.org/en-US/docs/Web/HTML/Element/thead
Adrien Be

3
@masterxilo何を期待しましたか?HTML自体はかなり古いものです。
Dan Bechard、2015

1
@鹿野まだ使用されている30年前のRFCにリンクすることに異議を唱えますか?情報がまだ関連している限り、ページが何歳であるかは重要ですか?
jmbpiano 2017年

65

<th>実際には、<td>セルをヘッダーセルとしてマークする場合の代わりになります。

使用<thead>したい場合は、内部<th>にネストすることを忘れないでください。そうしないと、コードが無効になる可能性があります。 例:<th><tr>

<table>
  <thead>
    <tr>
      <th>Season</th>
      <th>Goals</th>
      <th>Assists</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2009-2010</th>
      <td>25</td>
      <td>43</td>
    </tr>
    <tr>
      <th>2011-2012</th>
      <td>40</td>
      <td>20</td>
    </tr>
  </tbody>
</table>


2
これは元の質問には答えません。これは補足であり、答えではなくコメントにする必要があります。
ジェラルドシュナイダー

7
私は知っていますが、評判が低すぎてコメントを投稿できないので、回答を投稿しようとしました。すみません、私のせいですが、スタックサービス全体のルールが時々奇妙です。
rflw

28
実際、この答えはTHとTHEADの使用を示す唯一の答えです。+1!
Barrypicker 2016年

4
「利点はのth内部theadでもでも使用できるためtbody、両方の要素がそれぞれのコンテキストで役立ちます。」それが質問の答えになります...ジェラルドはあなたが答えを書いた方法にうるさいだけですが、意味のある例を提供したのはここでの唯一の答えです。
CPHPython

1
追加のCSSがなければ、デフォルトで太字にthなることさえ知りませんでした。ありがとうございます。
CPHPython

11

th内に存在する可能性のあるものよりも具体的ですtheadthセルは、対応するヘッダを指定することでtd、細胞を。実際headerstdセルのIDを指す属性をセルに追加できますth(スクリーンリーダーの場合)。したがって、その列のsにth直接関連してtdいます。

ただし、thead任意の情報を含めることができます...一般的にはい、thセルが含まれますが、表の上部に情報として適切であると思われるものを含めることもできます(キャプション以外、これには独自のタグがあるため、上手)。


6

<thead> 印刷バージョンでは、ページ上部のヘッダー行を繰り返すために使用できるという点で特別です。


6

<thead>

テーブルの行は、それぞれと要素を使用してTHEAD、テーブルヘッド、テーブルフット、および1つ以上のテーブルボディセクションにグループ化できます。この分割により、ユーザーエージェントは、テーブルのヘッドとフットに関係なく、テーブルボディのスクロールをサポートできます。長いテーブルが印刷される場合、テーブルデータを含む各ページでテーブルの頭と脚の情報が繰り返されることがあります。TFOOTTBODY

テーブルヘッドとテーブルフットには、テーブルの列に関する情報が含まれている必要があります。テーブル本体には、テーブルデータの行が含まれている必要があります。

存在する場合、THEAD、TFOOT、およびTBODYのそれぞれに行グループが含まれます。各行グループには、TR要素で定義された少なくとも1つの行が含まれている必要があります。

<th>

テーブルセルには、ヘッダー情報とデータの2種類の情報が含まれる場合があります。この違いにより、ユーザーエージェントは、スタイルシートがない場合でも、ヘッダーとデータセルを明確にレンダリングできます。たとえば、視覚的なユーザーエージェントは、ヘッダーセルのテキストを太字で表示できます。スピーチシンセサイザーは、明確な音声の抑揚でヘッダー情報をレンダリングする場合があります。

TH要素は、ヘッダー情報を含むセルを定義します。ユーザーエージェントには、TH要素の内容とabbr属性の値という2つのヘッダー情報があります。ユーザーエージェントは、セルの内容またはabbr属性の値のいずれかをレンダリングする必要があります。視覚メディアの場合、セルのコンテンツ全体を表示するためのスペースが不十分な場合は後者が適切です。非ビジュアルメディアの場合、abbrは、適用されるセルのコンテンツと共にレンダリングされるときに、テーブルヘッダーの省略形として使用できます。

出典:http : //www.w3.org/TR/html4/struct/tables.html


3

経験から知る限り、CSSを使用してレンダリングの違いを指定しない限り、レンダリングに違いはありません。の<td>内部は、またはの内部<thead>と同じようにレンダリングされます。<th><table><tbody>


thead要素にも行が含まれています。
DanMan

1
私はあなたの意味だと思う<td>の内側を<thead>同じレンダリングし<th>ないこと、<tr>ありません。
frabjous

0

ここには厳しいルールはありません。<thead>要素は同じように、グループあなたの列と行にもうひとつの方法である<tbody><tfoot>されます。そのため、スクリプトやフォーマットの可能性が広がります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.