<div> into a <tr>: is it correct?

问题

Is this code correct?

<table>
    <tr>
        <td>...</td>
    </tr>

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

    <tr>
        <td>...</td>
    </tr>    
</table>    

don\'t know for semantic (and W3C rules). What can you say about?

回答1:

No it is not valid. tr elements can only contain th and td elements. From the HTML4 specification:

<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ATTLIST TR                           -- table row --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
>

回答2:

Not only is it not valid, but it doesn't work! This mark-up

<table>
    <tr>
        <td>The First Row</td>
    </tr>

    <tr>
        <div>The Second Row</div>
    </tr>

    <tr>
        <td>The Third Row</td>
    </tr>    
</table> 

Produces this displayed

The Second Row
The First Row
The Third Row

The div is ejected entirely from the table and placed before it in the DOM

see http://jsfiddle.net/ELzs3/1/

回答3:

No, you should not really use a div inside a table because it is a block level element. You can override the behaviour with CSS, but it will not validate with W3C if that is your goal.

回答4:

No you should not use a <div> inside of a <tr>. You could use it inside <td> where as the table is a properly nested table, although this may not be best practice. You can actually override display setting of a div or any element. You could actually make a <div>(which defaults to block) display as a table-cell and vice versa.

回答5:

This will work in quirks mode, but the browser which is compatible with standard mode will not work depend upon your doctype. Avoiding quirks mode is one of the keys to successfully producing cross-browser compatible web content

Some modern browsers have two rendering modes. Quirk mode renders an HTML document like older browsers used to do it, e.g. Netscape 4, Internet Explorer 4 and 5. Standard mode renders a page according to W3C recommendations. Depending on the document type declaration present in the HTML document, the browser will switch into either quirk mode or standard mode. If there is no document type declaration present, the browser will switch into quirk mode.

http://www.w3.org/TR/REC-html32#dtd

JavaScript should not behave differently; however, the DOM objects that JavaScript operates on may have different behaviors.

回答6:

Let's say your table row has 5 columns in general and you want your div to occupy the full width of the table. The following should do the trick.

<tr>
  <td colspan=5>
    <div class="some-class">
      <p>Hey</p>
    </div>
  </td>
</tr>

来源：https://stackoverflow.com/questions/7051219/div-into-a-tr-is-it-correct