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

【问题标题】：Why do browsers insert tbody element into table elements?为什么浏览器会在表格元素中插入 tbody 元素？
【发布时间】：2010-10-30 14:23:51
【问题描述】：

我正在使用原始 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 调试器中查看代码时……所有这些都显示有一个 tbody 元素围绕着所有 >tr 个节点。

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

【问题讨论】：

有趣的是，如果您使用 JavaScript 爬过 dom，如果他们不知道的话，额外的 tbody 可能会绊倒一个毫无戒心的人。这意味着表格单元格中的内容嵌套了一个额外的元素！
这在开发爬虫时尤其烦人。有没有办法关掉它？还是查看发送到浏览器的原始代码的扩展程序？
当您尝试通过子选择器应用 CSS 样式时尤其烦人：table > tr > td。您必须使用后代选择器：table tr > td，或者如果您真的想要严格，请同时满足两种情况：table > tr > td, table > tbody > tr > td

标签： html xhtml

【解决方案1】：

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

TBODY 元素定义表中的一组数据行。一个 TABLE 必须有一个或多个 TBODY 元素，这些元素必须跟在可选的 TFOOT 之后。 TBODY 结束标签始终是可选的。当表只包含一个 TBODY 而没有 THEAD 或 TFOOT 时，开始标记是可选的。

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

另一方面，thead 或 tfoot 永远不会出现，除非你明确包含它们，如果你这样做，tbody(s) 也必须是明确的。

【讨论】：

我不确定您的链接是否正确，至少根据规范。请参阅 SO 上的 this。
@Jack Douglas：不，该答案中链接的规范明确指出<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> 和<!ELEMENT TBODY O O (TR)+ -- table body --> Start tag: optional, End tag: optional - 也就是说，表格元素具有一个或多个tbody 元素（TBODY+）和tbody元素具有可选的（如果未指定，则为隐式）开始标记。诚然，这与 TBODY 完全是可选的并没有什么不同，但 this 的问题正是关于这种差异——它存在于 DOM 中，无论它是否出现在 html 文本中。
如果你有扫帚，但扫帚柄和扫帚头都是可选的，那么你真的有扫帚吗？是必需的，但它的两个标签都是可选的，这是一个非常奇怪的概念，也是规范如此混乱和难以理解的原因之一。

【解决方案2】：

是的，tbody 是表示表格主体的标准元素。不需要将其放入标记中，但如您所见，它将包含在 DOM 中。

【讨论】：

为什么不用thead，tfoot 也一样？ ;-)
看起来你可以拥有它们。我认为 w3schools 会有更多详细信息，但这是我在第一次通过时发现的所有信息。 w3schools.com/HTMLDOM/dom_obj_table.asp
为什么不用thead/tfoot？好吧，因为它们不需要渲染作为 tbody 的表格。
用荷马辛普森的不朽话语“Doh！”
@Cerebrus：好吧，即使我也赞成这个答案，但给出的论点有些错误，因为它只涉及标记规范，但 OP 询问了 DOM。所以它有点像这里所说的：DOM（模型）和 HTML（标记）之间的区别。我想说缺少的文档链接是：Interface HTMLTableElement - DOM 具有 TBODY 的原因是因为标记具有 <table> 标记。不是因为缺少<tbody> 标签。它与表的更具体的HTMLElement 子类型有关。