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

Question

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

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

    </div>
</table>

Answer 1

表标签内的 div 是无效的。改用 tbody

Answer 2

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

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 和 tbody元素来对表格行进行分组。使用其中适当的元素代替 div 元素（您可以只有一个 thead 和一个 tfoot，但对 tbody 元素的数量没有限制）。

Answer 3

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