into a : is it correct?

Question

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?

The HTML standard defines the content model of TR elements: *"Zero or more td or th elements"*. See here: http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-tr-element — Šime Vidas, Aug 13 '11 at 15:07

Felix Kling · Accepted Answer · 2011-08-13T15:12:25.310

27

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

edited Aug 13 '11 at 15:12

answered Aug 13 '11 at 15:04

Felix Kling

795,719
175
1,089
1,143

1

So how can I use (for some tr) some with different width? – markzzz Aug 13 '11 at 15:07
2

@markzzz: I don't know what you mean, you can specify the width with CSS, or use the `colspan` attribute, depending on what you want. – Felix Kling Aug 13 '11 at 15:09

score 13 · Answer 2 · answered Aug 13 '11 at 15:41

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/

score 5 · Answer 3 · answered Aug 13 '11 at 15:03

5

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.

answered Aug 13 '11 at 15:03

shanethehat

15,460
11
57
87

1

How can I override this behavior in CSS? – allenwoot Feb 03 '16 at 21:08

score 4 · Answer 4 · answered Aug 13 '11 at 15:10

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.

score 3 · Answer 5 · answered Mar 12 '17 at 10:21

3

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>

answered Mar 12 '17 at 10:21

daneczech

655
1
9
20

Pir Abdul · Answer 6 · 2011-08-13T15:12:07.243

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.

into a : is it correct?

6 Answers6

Linked