Question

每次使用thead标记时，我是否真的会使用tbody，tfoot和table标记？是否需要标准？

Answer 1

不需要这些标签。如果表用于表示数据，那么它被认为是使用它们的好形式，这应该是表的用途。如果使用表格来布置内容，则通常会将其省略。

Table of data

Answer 2

可以使用此元素（tr）的上下文：


作为thead元素的孩子。

作为tbody元素的孩子。

作为tfoot元素的孩子。

作为table元素的孩子，在任何caption，colgroup和thead元素之后，但仅限于没有tbody元素是表元素的子元素。

尽管我认为在thead，tbody和tfoot标记内划分您的行是一种很好的做法，因为它可以使表格的行更容易识别。< / p>

最后，浏览器将始终为您添加至少tbody。

Answer 3

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

Answer 4

HTML和XHTML之间存在差异。

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

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

tr将始终位于tbody内，无论您是否明确地编写代码。这张桌子也是如此：

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

此处，第二个tr将包含在tbody。

中

在XHTML中，只有tbody和/或thead时才需要tfoot元素。

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

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

Answer 5

HTML5的两种形式是标记的良好实现和正确使用（在元素之间建立程序化关联），第二种是使网页更易于访问。

网站https://webaim.org说：

无法看到表格的人无法建立这些视觉关联，因此必须使用适当的标记在表格中的元素之间建立程序化关联。使用适当的HTML标记后，屏幕阅读器的用户可以一次在一个单元格中浏览数据表，并且他们会听到对他们说的列标题和行标题。

这就是为什么还创建了<thead>和<tbody>的原因。屏幕阅读器软件将可以使用这两个标签。

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

Creating Accessible Tables

Answer 6

简而言之，如果我记得我正确阅读的文章，答案是＆＃34;否＆＃34;。标准不是必需。

Answer 7

对于你的问题，答案是“不，他们没有必要”。

通过标记包含<thead>，<tfoot>，<tbody>的表格行，您可以在不使用ID或类的情况下对其进行分组。允许更多样式调整，例如固定标题和可滚动的正文。

简单表

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

与thead，tbody

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

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

这将返回<thead>元素，而不是您的代码建议的<table>元素。根据您要尝试执行的操作，这可能会导致问题。在最理想的情况下，您将拥有一个与代码不同步的DOM，这可能会导致混淆和调试的难度。在最坏的情况下，您会在不同的浏览器中遇到javascript损坏和/或行为不一致的问题，尽管当今使用现代浏览器时，这大多不是问题。

这种情况不太常见，但是您也可能会遇到CSS问题，例如，如果您设置了<tbody>元素的样式，并且不希望出现它，但是确实如此。

当您不打算使用javascript来操作DOM时，并且如果您的CSS旨在考虑这一点，则可以省略tbody和thead（在绝大多数情况下，那里的多余元素不会改变任何东西。

Answer 9

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

根据此页面，HTML标准建议使用tbody来发布此页面，“尽管根据所描述的内容模型，在技术上允许这些[tr]元素在表格元素中在本规范中”：D

从可访问性的角度来看，tbody，tfoot和thead不提供可访问性功能。

是否需要使用thead，tbody和tfoot标签？

9 个答案: