html 表格：thead vs th

Posted 2023-03-05

【中文标题】html 表格：thead vs th

【英文标题】：html tables: thead vs th

【发布时间】：2011-07-20 16:41:11

【问题描述】：

看起来（根据this page 上的示例，无论如何）如果您使用的是 THEAD，则不需要使用 TH。

这是真的吗？如果是这样，THEAD 与 TH 的优缺点是什么？

【问题讨论】：

我在该页面上没有看到任何建议使用 thead 而不使用 th 的示例。有一些示例只显示了thead 中的tr 元素，但应该理解（从规范的其余部分）一行 (tr) 本身并不存在——它包含一堆单元格（th 或 td）。 ... 会向您显示缺少某些代码！不过，这是一个公平的问题：thead > tr > td 有效吗？我认为当它是thead 的后代时，给td 标头状态同样语义，但后来我没有编写规范。

【参考方案1】：

<thead> 标签用于对 html 表格中的标题内容进行分组。 thead 元素应与tbody 和tfoot 元素一起使用。

更多：thead

您使用<thead> 封装整行（或多行）以将它们指定为表头。 根据规范，

“这个划分使用户代理能够 支持表格主体的滚动 独立于表头和 脚。打印长表时， 表头脚信息 可以在每一页上重复 包含表格数据。”

另一方面，<th> 用于将特定单元格设置为标题单元格 而不是普通的数据单元格。

【讨论】：

这是您在“更多：thead”中链接到的一个古老网站。

另见：Mozilla 的文档developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

@masterxilo 你期待什么？ HTML 本身非常古老。

@Kano 你会反对有人链接到一个 30 年前仍在使用的 RFC 吗？只要信息仍然相关，页面的历史有什么关系？

@jmbpiano 您怎么知道仅基于该页面的信息仍然相关？ thead 上的 MDN 文档页面上次更新是在一个月前，使其（至少）成为更值得信赖的资源。

【参考方案2】：

根据我的经验，除非您使用 CSS 来指定渲染差异，否则渲染没有区别。 <thead> 内的 <td> 将呈现与 <table> 或 <tbody> 内的 <th> 相同的效果。

【讨论】：

thead 元素也包含行。

我认为你的意思是 <thead> 内部的 <td> 与 <th> 呈现相同，而不是 <tr> 那样。

React 说“

不能作为 的子项出现”

【参考方案3】：

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

【参考方案4】：

这里没有硬性规定。 <thead> 元素只是对列和行进行分组的另一种方式，就像 <tbody> 和 <tfoot> 一样。所以你有更多的可能性来编写脚本和格式化。

【参考方案5】：

th 比 thead 内部的内容更具体。 th 单元格是指定对应的td 单元格的标题。事实上，您可以将headers 属性添加到td 单元格，该单元格指向th 单元格的ID（用于屏幕阅读器）。所以th 与该列的tds 直接相关。

但是，thead 可以包含任何信息...通常是的，它确实包含 th 单元格，但它也可以包含您认为适合作为表格顶部信息的任何内容（除了标题，因为它也有自己的标签）。

【参考方案6】：

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

如果您想使用<thead> 和<th>，请不要忘记将<th> 嵌套在<tr> 中。否则代码可能无效。 示例：

<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>

【讨论】：

这并没有回答原始问题，它更像是一个附录，应该是评论而不是答案。

我知道，但我的声誉点太低，无法发表评论，所以我尝试发布答案。对不起，是我的错，但是全栈服务的规则有时对我来说很奇怪。

实际上，这个答案是唯一一个显示使用 TH 和 THEAD 的答案。为此 +1！

如果你写“优点是th 可以在thead 和tbody 中使用，这两个元素在它们自己的上下文中都很有用。”这回答了这个问题......杰拉德只是对你写答案的方式很挑剔，但实际上它是这里唯一提供有意义示例的答案。

我什至不知道 th 默认情况下会被 bolded，没有额外的 CSS，谢谢！

【参考方案7】：

<thead>

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

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

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

<th>

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

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

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