HTML DTDによると、これは HTML テーブルのコンテンツ モデルです。
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION - - (%inline;)* -- table caption -->
<!ELEMENT THEAD - O (TR)+ -- table header -->
<!ELEMENT TFOOT - O (TR)+ -- table footer -->
<!ELEMENT TBODY O O (TR)+ -- table body -->
<!ELEMENT COLGROUP - O (COL)* -- table column group -->
<!ELEMENT COL - O EMPTY -- table column -->
<!ELEMENT TR - O (TH|TD)+ -- table row -->
<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell-->
したがって、これは不正な構文です。
<thead><th>Heading of table</th></thead>
そのはず：
<thead><tr><th>Heading of table</th></tr></thead>
<th>要素はどこにも必要ありません。<td>これらは、表の行で使用できる2 つのセル タイプ (もう 1 つは ) の 1 つにすぎません。A<thead>は、1 つ以上の行を含めることができるオプションのテーブル セクションです。
編集：使用する理由について<thead>は、いくつかの理由があります。
- セマンティック:テーブルのコンテンツと「メタデータ」を区別しています。これは、列ヘッダーとデータ行の間を区切るために最もよく使用されます。
- アクセシビリティ:スクリーン リーダーを使用するユーザーがテーブルの内容を理解するのに役立ちます。
- 画面以外のメディア:複数ページの表を印刷すると、各ページの上部にコンテンツを配置できる場合があります。
<thead>これにより、人々は数ページをめくることなく列の意味を理解できます。
- スタイリング:
<tbody> CSS は、要素、<thead>要素、両方、またはその他の組み合わせに適用できます。セレクターを書くための何か他のものを提供します。
- Javascript:これは、jQuery および同様のライブラリを使用している場合によく発生します。追加情報は、コードを記述するのに役立ちます。
(5) の例として、次のようにします。
$("table > tbody > tr:nth-child(odd)").addClass("odd");
<thead>要素は、それらの行がそのようにスタイルされないことを意味します。または、次のようにすることもできます。
$("table > tbody > tr").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
と：
tr.hover { background: yellow; }
これも行を除外し<thead>ます。
最後に、これらの同じ議論の多くは、<th>要素よりも<td>要素を使用することに適用されます。このセルはデータではなく、ある種のヘッダーであることを示しています。<thead>多くの場合、このようなセルは、テーブルの構造と性質に応じて、セクション内の 1 つ以上の行にグループ化されるか、各行の最初のセルになります。