70

I was playing around with some ideas using raw html and JQuery. One thing I did was to create an table element with a set of rows.

<table id="MyTable" >
    <tr>
        <td>Title</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
    </tr>
</table>

But when I viewed the code in FireFox+Firebug, IE8 Developer Toolbar, or the Google Chrome JavaScript Debugger...all of them showed there to be a tbody element surrounding all of the tr nodes.

I'm not against this happening...but is this standard behavior?

John Topley
  • 113,588
  • 46
  • 195
  • 237
Chris Brandsma
  • 11,666
  • 5
  • 47
  • 58
  • 3
    This is especially annoying when developing scrapers. Is there any way to turn it off? Or an extension to view the raw code sent to the browser? – hamstar Dec 27 '09 at 14:30
  • 5
    Interestingly if you are crawling through the dom with JavaScript the extra tbody can trip an unsuspecting person up if they don't know about it. It means that content in the table cells is nested an extra element deep! – Matthew James Taylor Jun 02 '09 at 06:49
  • 4
    Especially annoying when you're trying to apply CSS styles through child selector: `table > tr > td`. You have to either use a descendant selector: `table tr > td`, or if you really want to be strict, cater to both cases: `table > tr > td, table > tbody > tr > td` – ADTC Jul 24 '16 at 13:16

2 Answers2

58

http://htmlhelp.com/reference/html40/tables/tbody.html:

The TBODY element defines a group of data rows in a table. A TABLE must have one or more TBODY elements, which must follow the optional TFOOT. The TBODY end tag is always optional. The start tag is optional when the table contains only one TBODY and no THEAD or TFOOT.

So there always is a tbody there (albeit sometimes with both the start and end tags optional and omitted), and the tools you are using are correct in showing it to you.

thead or tfoot, on the other hand, are never present unless you explicitly include them, and if you do that, the tbody(s) must be explicit too.

artdanil
  • 4,952
  • 2
  • 32
  • 49
ysth
  • 96,171
  • 6
  • 121
  • 214
  • I'm not sure your link is correct, at least according to the spec. See [this](http://stackoverflow.com/a/3078121/533832) elsewhere on SO. –  Oct 26 '12 at 18:02
  • 4
    @Jack Douglas: no, the spec linked to in that answer explicitly says `<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>` and `<!ELEMENT TBODY O O (TR)+ -- table body --> Start tag: optional, End tag: optional` - that is, table elements have one or more tbody elements (the `TBODY+`) and tbody elements have an optional (implicit if not specified) start tag.; admittedly, this is not that different from TBODY just being entirely optional, but *this* question is precisely about that difference-it is there in the DOM whether or not it appears in the html text. – ysth Oct 27 '12 at 00:36
  • If you have a broom, but the broom handle and the broom head are both optional, do actually have a broom? The being required and yet both of its tags being optional is a pretty odd concept and is one reason (of many) why the specs are so confusing and poorly understood. – tobuslieven Sep 11 '15 at 08:54
14

Yes, tbody is the standard element indicating the body of a table. It is not required to put it in the markup, but it will be included in the DOM as you've seen.

Matthew Flaschen
  • 278,309
  • 50
  • 514
  • 539
  • Why not thead, tfoot as well ? ;-) – Cerebrus Jun 02 '09 at 06:03
  • Looks like you can have them. I figured w3schools would have more details but this is all I found on a first pass. http://www.w3schools.com/HTMLDOM/dom_obj_table.asp – Tyler Jun 02 '09 at 06:10
  • 2
    Why not thead/tfoot? Well, because they are not required to render a table where as a tbody is. – Jordan S. Jones Jun 02 '09 at 06:18
  • @Jordan: I know... but my comment was a hint to include that information in the answer to make it more complete. (See @ysth's answer). – Cerebrus Jun 02 '09 at 07:14
  • 1
    In the immortal words of Homer Simpson, "Doh!" – Jordan S. Jones Jun 02 '09 at 07:32
  • 1
    @Cerebrus: Well, even I upvoted that answer too, but the argument given is somewhat wrong, because it only refers to the markup specs, but OP asks about the DOM. So it's a bit more like said here: difference between DOM (the model) and HTML (the markup). I would say the missing link to the documentation is: [*Interface HTMLTableElement*](http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-64060425) - The reason why the DOM has TBODY is because the markup has a `` tag. Not because the `` tag is missing. It's related to more specific subtypes of `HTMLElement` for tables.
     – hakre Aug 26 '13 at 06:30