Html 用 div 对 tr 标签进行分组真的是个坏主意吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10258202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:55:15  来源:igfitidea点击:

Is it really bad idea to group tr tags with div?

htmlbackbone.jshtml-table

提问by syabro

I'm developing application with Backbone.js View class returns one element after rendering. It's ok if I use divs or spans. But problem starts when I start to render objects as tr rows. One objects should be rendered to 2-3 rows. So can I use this structure?

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

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

    </div>
</table>

回答by Gwyn Howell

divs immediately inside a table tag is invalid. use tbody instead

立即在 table 标记内的 div 无效。改用 tbody

回答by Quentin

Yes, it is a very bad idea.

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

The HTML specification does not allow div elements to be child elements of a table element, so it triggers error recovery routines in browsers.

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

Given this input:

鉴于此输入:

<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>

The DOM that Firefox will generate (and you can see this by using the Inspect Element feature) will look like this:

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>

Note that the div elements have been removed from the table and placed before it. This makes them useless for manipulating the rows.

请注意,div 元素已从表格中删除并放置在它之前。这使得它们无法用于操作行。

HTML provides the thead, tfoot and tbodyelements to group table rows. Use the appropriate ones of those instead of div elements (you can have only one thead and only one tfoot, but there are no limits on the number of tbody elements).

HTML 提供了thead、tfoot 和 tbody元素来对表格行进行分组。使用其中适当的元素代替 div 元素(您只能有一个 thead 和一个 tfoot,但对 tbody 元素的数量没有限制)。

回答by Nix

That is not valid HTML. You can not nest block or inline elements in a table, only table elements, such as <tbody>, <tr>or <thead>. You can of course nest a <div>in a table cell (<td>or <th>).

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