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?

3
  • 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! Jun 2, 2009 at 6:49
  • 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, 2009 at 14:30
  • 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, 2016 at 13:16

2 Answers 2

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.

3
  • I'm not sure your link is correct, at least according to the spec. See this elsewhere on SO.
    – user533832
    Oct 26, 2012 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, 2012 at 0:36
  • 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. Sep 11, 2015 at 8: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.

6
  • Why not thead, tfoot as well ? ;-)
    – Cerebrus
    Jun 2, 2009 at 6:03
  • 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
    – Tyler
    Jun 2, 2009 at 6:10
  • 2
    Why not thead/tfoot? Well, because they are not required to render a table where as a tbody is. Jun 2, 2009 at 6:18
  • 1
    In the immortal words of Homer Simpson, "Doh!" Jun 2, 2009 at 7: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 - 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.
    – hakre
    Aug 26, 2013 at 6:30

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.