是否必须使用 thead、tbody 和 tfoot 标签？

Question

每次使用 table 标签时，我真的应该使用 thead、tbody 和 tfoot 标签吗？是不是标准要求的？

Answer 1

简而言之，如果我没记错文章的话，答案是"No"。标准不需要它们。

Answer 2

没有。现代浏览器会默认添加这些。

Answer 3

这些标签不是必需的。如果 table 用于表示数据，则使用它们被认为是一种很好的形式，而这正是 table 应该用于的目的。如果 table 用于布置内容，则通常会省略它们。

W3C

Answer 4

对于你的问题，答案是"no, they are not necessary"。

通过用 <thead>、<tfoot>、<tbody> 标记 table 行，您可以在不使用 ID 或 class 的情况下对它们进行分组。允许更多的样式调整，比如fixed header and scroll-able body.

简单table

<table>
  <tr>
    <td></td>
  </tr>
</table>

与 thead, tbody

<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 5

这里HTML和XHTML有区别

在 HTML 中，tbody 元素是必需的。但是，它的开始和结束标记是可选的。这意味着如果你写

<table>
    <tr><td>data</td></tr>
</table>

tr 将始终在 tbody 内，无论您是否显式编写标签。同样的故事 table:

<table>
    <thead>
    <tr><th>header</th></tr>
    </thead>
    <tr><td>data</td></tr>
</table>

在这里，第二个 tr 将被包裹在 tbody.

在 XHTML 中，仅当您有 thead and/or 和 tfoot 时才需要 tbody 元素。

所以上面的第一个例子是有效的 XHTML。但是 HTML 有一个区别：tr 将直接位于 DOM 树中的 table 内。（您将无法看到差异，但如果您需要在 JavaScript 中操作 table，请记住这一点。）

第二个例子是无效的 XHTML，如果它在不同的浏览器中有不同的结果，你不应该感到惊讶。

Answer 6

tabular data spec for HTML5不需要它们：

Contexts in which this element (tr) can be used:

As a child of a thead element.

As a child of a tbody element.

As a child of a tfoot element.

As a child of a table element, after any caption, colgroup, and thead elements, but only if there are no tbody elements that are children of the table element.

尽管我认为在 thead、tbody 和 tfoot 标签内划分行是一个很好的做法，因为它使 table 的行更容易识别。

最后，浏览器总是会至少为你添加tbody。

Answer 7

HTML5 的两个方面是标记的良好实施和正确使用（在元素之间建立程序关联），第二个是制作更易于访问的网页。

正如网站 https://webaim.org 所说：

Someone that cannot see the table cannot make these visual associations, so proper markup must be used to make a programmatic association between elements within the table. When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.

这就是 <thead> 和 <tbody> 也被创建的原因。屏幕 reader 软件将使用这两个标签。

希望对您有所帮助！如果你想了解更多，你可以阅读我用作参考的文章。

Creating Accessible Tables

Answer 8

这不是必需的，但如果您不添加它们，您可以运行遇到问题，并且您使用 JavaScript 来引用或操作 DOM。正如 iamwhitebox 指出的那样，大多数现代浏览器都会添加这些元素。

例如，如果你写：

<table>
<tr id="row"><td>Col 1</td><td>Col 2</td></tr>
</table>

Chrome 会变成

<table>
<tbody>
<tr id="row"><td>Col 1</td><td>Col 2</td></tr>
</tbody>
</table>

如果你现在引用

document.getElementById('row').parentElement

这将 return <thead> 元素，而不是代码建议的 <table> 元素。根据您尝试执行的操作，这可能会导致问题。作为一个非常好的情况，您将有一个 DOM 与您的代码不同步，这可能会造成混淆并且更难调试。作为最坏的情况，你会在不同的浏览器中遇到 javascript and/or 不一致的行为，尽管现在对于现代浏览器来说这基本上不是问题。

它不太常见，但您也可以运行遇到 CSS 问题，例如，如果您设置了 <tbody> 元素的样式，但您不希望它出现，但是确实如此。

如果您不打算用 javascript 操纵 DOM，并且如果您的 CSS 是旨在考虑到这一点（在绝大多数情况下，其中存在的额外元素不会改变任何东西）。

Answer 9

https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions

根据此页面，在发布此内容时，HTML 标准建议使用 tbody，"even though these [tr] elements are technically allowed inside table elements according to the content models described in this specification" :D

从辅助功能的角度来看，tbody、tfoot 和 thead 不提供辅助功能。

是否必须使用 thead、tbody 和 tfoot 标签？

Is it required to use thead, tbody and tfoot tags?

html

html-table