Why do browsers insert tbody element into table elements?

Question

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?

Velours

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! – Beatup

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? – Ori

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

Answer 1

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.

Mong

I'm not sure your link is correct, at least according to the spec. See this elsewhere on SO. – Attic

@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. – Mong

If you have a broom, but the broom handle and the broom head are both optional, do actually have a broom? The <thead> 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. – Apocynaceous

Answer 2

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.

Ladanum

Why not thead, tfoot as well ? ;-) – Stray

Looks like you can have them. I figured w3schools would have more details but this is all I found on a first pass. w3schools.com/HTMLDOM/dom_obj_table.asp – Ichthyosaur

Why not thead/tfoot? Well, because they are not required to render a table where as a tbody is. – Put

@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). – Stray

In the immortal words of Homer Simpson, "Doh!" – Put

@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 - The reason why the DOM has TBODY is because the markup has a <table> tag. Not because the <tbody> tag is missing. It's related to more specific subtypes of HTMLElement for tables. – Colobus