为什么浏览器会在表格元素中插入 tbody 元素？

Why do browsers insert tbody element into table elements?

提问人：Chris Brandsma 提问时间：6/2/2009 最后编辑：John TopleyChris Brandsma 更新时间：8/9/2018 访问量：21596

问：

我正在使用原始 html 和 JQuery 来玩一些想法。我做的一件事是创建一个包含一组行的表元素。

<table id="MyTable" >
    <tr>
        <td>Title</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
</table>

但是当我在 FireFox+Firebug、IE8 开发者工具栏或 Google Chrome JavaScript 调试器中查看代码时......所有这些都表明，所有 TR 节点周围都有一个 tbody 元素。

我不反对这种情况发生......但这是标准行为吗？

HTML xhtml

评论

3赞 hamstar 12/27/2009
这在开发刮板时尤其烦人。有什么方法可以关闭它吗？还是用于查看发送到浏览器的原始代码的扩展程序？
5赞 Matthew James Taylor 6/2/2009
有趣的是，如果你用 JavaScript 在 dom 中爬行，如果他们不知道的话，额外的 tbody 可能会绊倒一个毫无戒心的人。这意味着表格单元格中的内容嵌套了一个额外的元素深度！
4赞 ADTC 7/24/2016
当您尝试通过子选择器应用 CSS 样式时尤其烦人：.您必须使用后代选择器： ，或者如果您真的想严格，请满足这两种情况：table > tr > tdtable tr > tdtable > tr > td, table > tbody > tr > td

答：

14赞 Matthew Flaschen 6/2/2009 #1

是的，tbody 是指示表主体的标准元素。不需要把它放在标记中，但正如你所看到的，它将包含在 DOM 中。

评论

0赞 Cerebrus 6/2/2009
为什么不 thead，tfoot 也一样？;-)
0赞 Tyler 6/2/2009
看起来你可以拥有它们。我以为 w3schools 会有更多的细节，但这就是我第一次通过时发现的全部内容。 w3schools.com/HTMLDOM/dom_obj_table.asp
2赞 Jordan S. Jones 6/2/2009
为什么不 thead/tfoot？好吧，因为它们不需要渲染 tbody 所在的表。
1赞 Jordan S. Jones 6/2/2009
用荷马·辛普森（Homer Simpson）的不朽名言来说，“哎呀！
1赞 hakre 8/26/2013
@Cerebrus：好吧，即使我也对这个答案投了赞成票，但给出的论点有些错误，因为它只提到了标记规范，但 OP 询问了 DOM。所以它更像是这里说的：DOM（模型）和HTML（标记）之间的区别。我想说的是，文档中缺少的链接是： Interface HTMLTableElement - DOM 之所以有 TBODY 是因为标记有一个标签。不是因为缺少标签。它与 for 表的更具体子类型相关。<table><tbody>HTMLElement
58赞 ysth 6/2/2009 #2

http://htmlhelp.com/reference/html40/tables/tbody.html：

TBODY 元素定义表中的一组数据行。TABLE 必须具有一个或多个 TBODY 元素，这些元素必须遵循可选的 TFOOT。TBODY结束标签始终是可选的。当表中只有一个 TBODY 而没有 THEAD 或 TFOOT 时，start 标记是可选的。

因此，那里总是有一个 tbody（尽管有时开始和结束标签都是可选的和省略的），并且您正在使用的工具在向您显示它时是正确的。

另一方面，除非您明确包含它们，否则 thead 或 tfoot 永远不会存在，如果您这样做，则 tbody 也必须是显式的。

评论

0赞 10/27/2012
我不确定您的链接是否正确，至少根据规范。在 SO 的其他地方看到这一点。
4赞 ysth 10/27/2012
@Jack Douglas：不，该答案中链接的规范明确表示 - 也就是说，table 元素具有一个或多个 tbody 元素 （the），tbody 元素具有可选的（如果未指定，则为隐式）开始标记。诚然，这与TBODY完全是可选的并没有什么不同，但这个问题恰恰是关于这种差异的——无论它是否出现在html文本中，它都存在于DOM中。<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)><!ELEMENT TBODY O O (TR)+ -- table body --> Start tag: optional, End tag: optionalTBODY+
0赞 tobuslieven 9/11/2015
如果你有一把扫帚，但扫帚柄和扫帚头都是可选的，那么真的有扫帚吗？<thead>是必需的，但它的两个标签都是可选的，这是一个非常奇怪的概念，也是（许多）规范如此令人困惑和难以理解的原因之一。

上一个：自定义属性 - 是还是不是？

下一个：如何链接到页面的一部分？（哈希？