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?

Answer 1

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.

Answer 2

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

Answer 3

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!