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

Question

我正在使用原始 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调试器中查看代码时...他们都显示所有的节点都被一个元素包围。

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

- Chris Brandsma

---

有趣的是，如果您正在使用JavaScript遍历DOM，额外的tbody可能会使毫不知情的人困惑，如果他们不知道这一点。这意味着表格单元格中的内容嵌套了一个额外的元素！ - Matthew James Taylor

在开发网络爬虫时，这种情况特别令人恼火。有没有办法关闭它？或者有没有一个可以查看发送给浏览器的原始代码的扩展程序？ - hamstar

当你试图通过子选择器table > tr > td来应用CSS样式时，情况会变得特别烦人。你必须使用后代选择器table tr > td，或者如果你真的想严格执行，就要考虑两种情况：table > tr > td, table > tbody > tr > td。 - ADTC

Answer 1

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

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

因此，tbody始终存在（尽管有时候开始和结束标记是可选的且被省略），您使用的工具在向您显示它时是正确的。

thead或tfoot从来没有出现过，除非您明确地包含它们，如果您这样做，则tbody也必须明确指定。

- ysth

---

我不确定你的链接是否正确，至少根据规范来看是这样的。请参考 SO 上的 此处。 - user533832

@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 完全是可选的并没有太大不同，但是这个问题恰恰在于这种差异-无论它是否出现在 HTML 文本中，它都存在于 DOM 中。 - ysth

如果你有一把扫帚，但是扫帚柄和扫帚头都是可选的，那么你真的有一把扫帚吗？<thead>标签是必需的，但它的两个标签都是可选的，这是一个相当奇怪的概念，也是规范如此令人困惑和难以理解的原因之一。 - tobuslieven

Answer 2

是的，<tbody> 元素是表示表格主体的标准元素。在标记中不必放置它，但它会像您所见到的那样包含在 DOM 中。

- Matthew Flaschen

---

为什么不包括thead和tfoot呢？;-) - Cerebrus

看起来你可以拥有它们。我想w3schools会有更多细节，但这是我第一次找到的全部内容。 http://www.w3schools.com/HTMLDOM/dom_obj_table.asp - Tyler

为什么不使用 thead/tfoot？因为在渲染表格时它们不是必需的，而 tbody 是必需的。 - Jordan S. Jones

@Jordan：我知道...但我的评论是为了提示在答案中包含那些信息，使其更完整（请参见@ysth的答案）。 - Cerebrus

在霍默·辛普森不朽的话语中，“哎呀！” - Jordan S. Jones

@Cerebrus：嗯，我也点赞了那个答案，但是给出的论点有些错误，因为它只涉及标记规范，但OP问的是DOM。所以更像是这里说的：DOM（模型）和HTML（标记）之间的区别。我会说缺失的文档链接是：Interface HTMLTableElement - DOM具有TBODY的原因是标记具有<table>标签，而不是因为缺少<tbody>标签。它与表格的更具体的子类型的HTMLElement相关。 - hakre