将 tr 标签与 div 分组真的是个坏主意吗？

Posted 2023-03-05

【中文标题】将 tr 标签与 div 分组真的是个坏主意吗？

【英文标题】：Is it really bad idea to group tr tags with div?

【发布时间】：2012-05-02 17:53:58

【问题描述】：

我正在使用 Backbone.js 开发应用程序 视图类在渲染后返回一个元素。如果我使用 div 或 span 也没关系。 但是当我开始将对象呈现为 tr 行时，问题就开始了。 一个对象应呈现为 2-3 行。 那么我可以使用这个结构吗？

<table>
    <div>
        <tr>...</tr>
        <tr>...</tr>

    </div>
</table>

【参考方案1】：

table 标记内的 div 是无效的。改用 tbody

【讨论】：

我可以在表格中使用多个 tbody 标签吗？

是的，它不会造成任何伤害

谢谢。我还找到了很好的例子here

【参考方案2】：

这不是有效的 html。您不能在表格中嵌套块或内联元素，只能嵌套表格元素，例如<tbody>、<tr> 或<thead>。您当然可以将<div> 嵌套在表格单元格中（<td> 或<th>）。

【讨论】：

我知道我可以在 td 中嵌套一个 。我的问题是以某种方式分组 tr 标签。 div 的东西只是例子。

【参考方案3】：

是的，这是一个非常糟糕的主意。

HTML 规范不允许 div 元素成为 table 元素的子元素，因此它会触发浏览器中的错误恢复例程。

鉴于此输入：

<table>
  <tr><td>1</td></tr>
<div>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
</div>
  <tr><td>4</td></tr>
<div>
  <tr><td>5</td></tr>
  <tr><td>6</td></tr>
</div>

Firefox 将生成的 DOM（您可以使用 Inspect Element 功能查看）如下所示：

<div>
  </div><div>
  </div><table>
  <tbody><tr><td>1</td></tr>
<tr><td>2</td></tr>
  <tr><td>3</td></tr>

  <tr><td>4</td></tr>
<tr><td>5</td></tr>
  <tr><td>6</td></tr>

</tbody></table>

请注意，div 元素已从表格中移除并放置在表格之前。这使得它们对于操作行毫无用处。

HTML 提供thead, tfoot and tbody 元素来对表格行进行分组。使用其中适当的元素代替 div 元素（您可以只有一个 thead 和一个 tfoot，但对 tbody 元素的数量没有限制）。