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

Question

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?

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

    </div>
</table>

Answer 1

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

Answer 2

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.

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:

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

HTML provides the thead, tfoot and tbody elements 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).

Answer 3

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