根据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>
)您可以在表行中使用。 A<thead>
是一个可选的表部分,可以包含一行或多行。
Edit: As to why to use <thead>
有几个原因:
-
语义:您正在区分表的内容和“元数据”。这最常用于划分列标题和数据行;
-
辅助功能:它可以帮助使用屏幕阅读器的人理解表格的内容;
-
非屏幕媒体:打印多页表可以让您将
<thead>
每页顶部的内容,这样人们无需向后翻几页就可以理解各栏的含义;
-
Styling:CSS可应用于
<tbody>
元素,<thead>
元素,两者或某种其他组合。它为您提供了其他东西来编写选择器;
-
JavaScript:使用 jQuery 和类似库时经常会出现这种情况。额外的信息对编写代码很有帮助。
作为 (5) 的示例,您可以这样做:
$("table > tbody > tr:nth-child(odd)").addClass("odd");
The <thead>
元素意味着这些行不会以这种方式设置样式。或者你可能会这样做:
$("table > tbody > tr").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
with:
tr.hover { background: yellow; }
这再次排除了<thead>
rows.
最后,许多相同的论点也适用于使用<th>
元素超过<td>
elements:您表明该单元格不是数据,而是某种类型的标题。通常,这些单元格会被分组为一行或多行<thead>
部分或成为每行的第一个单元格,具体取决于表格的结构和性质。