Html 表: head vs th

看起来(根据 这一页上的例子) ,如果你使用 THAD,你不需要使用 TH。

是这样吗? 如果是这样,THAD 和 TH 的优缺点是什么?

111023 次浏览

<thead>标记用于将 HTML 表中的标题内容分组。 thead元素应该与 tbodytfoot元素一起使用。

更多:

您可以使用 <thead>封装整个行(或行) ,将它们指定为表头。 根据说明书,

”此分区使用户代理能够 支持表体滚动 独立于桌头和 当长桌子被印刷出来的时候, 表头和表脚的信息 可以在每一页上重复 包含表格数据。”

另一方面,<th>用于将特定单元格样式化为标题单元格 而不是普通的数据单元。

根据我的经验,除非您使用 CSS 来指定渲染的不同,否则渲染没有什么不同。<thead>内的 <td>将呈现与 <table><tbody>内的 <th>相同的效果。

<thead>的特殊之处在于,它可以用来在打印版本中重复页面顶部的标题行。

这里没有硬性规定。<thead>元素只是对列和行进行分组的另一种方式,就像 <tbody><tfoot>一样。因此,编写脚本和设置格式的可能性更大。

ththead内部可能存在的东西更具体。th单元格是指定相应的 td单元格的标头。实际上,您可以向 td单元格添加一个 headers属性,该属性指向 th单元格的 id (对于屏幕阅读器)。因此,th与该列的 td直接相关。

然而,thead可以包含任何信息... ... 通常是的,它确实包含了 th单元格,但是它也可以包含任何你认为适合作为表格顶部信息的东西(除了标题,因为它也有自己的标签)。

当您希望将单元格标记为标题单元格时,<th>实际上是 <td>的替代品。

如果你想使用 <thead><th>,不要忘记在 <tr>中嵌套 <th>。否则代码可能无效。
例如:

<table>
<thead>
<tr>
<!-- scope="col" is optional if the th is inside a thead -->
<th scope="col">Season</th>
<th scope="col">Goals</th>
<th scope="col">Assists</th>
</tr>
</thead>
<tbody>
<tr>
<!-- scope="row" indicates that the th is a header for that row -->
<th scope="row">2009-2010</th>
<td>25</td>
<td>43</td>
</tr>
<tr>
<th scope="row">2011-2012</th>
<td>40</td>
<td>20</td>
</tr>
</tbody>
</table>

<thead>

表行可以分别使用 THEADTFOOTTBODY元素分组为表头、表脚和一个或多个表体部分。这种划分使得用户代理能够支持独立于表头和表脚的表体滚动。打印长表时,表头和表脚信息可能会在包含表数据的每一页上重复出现。

表头和表脚应该包含有关表列的信息。表体应该包含表数据行。

当存在时,每个 THEAD、 TFOOT 和 TBODY 都包含一个行组。每个行组必须至少包含一行,由 TR 元素定义。

<th>

表单元格可以包含两种类型的信息: 头信息和数据。这种区别使用户代理可以清楚地呈现标题和数据单元格,即使在没有样式表的情况下也是如此。例如,可视化用户代理可以使用粗体显示标题单元格文本。语音合成器可以使用明显的语音变化来呈现标题信息。

TH 元素定义了一个包含头信息的单元格。用户代理有两个可用的头信息: TH 元素的内容和 abbr 属性的值。用户代理必须呈现单元格的内容或 abbr 属性的值。对于可视媒体,当没有足够的空间来呈现单元格的完整内容时,后者可能是合适的。对于非可视媒体,当表头和它们所应用的单元格的内容一起呈现时,缩写可以用作表头的缩写。

资料来源: http://www.w3.org/TR/html4/struct/tables.html