Tutorial :Why does firebug add <tbody> to <table>?



Question:

I viewed the html source code, there is no <tbody>, but when viewed via firebug in the HTML tab, <tbody> appears. Any idea why?


Solution:1

To summarize the excellent explanations given in the answers and comments by bobince, Kieron, Alohci and others:

  1. Firebug just displays the DOM of the parsed page. Due to complicated HTML parsing rules, the DOM will "differ" (in some sense) from the source HTML.
  2. In this case the TBODY element in the DOM is added by the HTML parser. Note that this weird parsing is limited to text/html documents and in XHTML the DOM corresponds closely to the source XML.
    • This behavior was specified in HTML 4. The content model (allowed children) for table is (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+) -- trs are only allowed in tbody! The spec says that tbody's start tag is optional, which is supposed to mean that if the HTML parser encounters tr directly inside a table it inserts the tbody start tag omitted by the author.
    • To make matters more clear HTML 5 defines very detailed parsing rules, in particular for this case: "When the insertion mode is "in table", tokens must be handled as follows: [...] A start tag whose tag name is one of: "td", "th", "tr" -> Act as if a start tag token with the tag name "tbody" had been seen, then reprocess the current token."


Solution:2

Its not firebug, but firefox which does that. This is the way tables are supposed to be written with <TBODY> separate from meta data like <COLGROUP> Firefox simply inserts the <TBODY> tags when it finds them missing.


Solution:3

Firefox adds them, because the standard says so.

TABLE is not actually allowed to contain TR elements directly, they must be contained in THEAD, TFOOT or TBODY. But for simplicity and backwards compatibility, the start tag of TBODY may be omitted "when the table contains only one table body and no table head or foot sections"; in which case the element is inferred by the browser.


Solution:4

It's not added by firebug, it's added by Firefox. Firebug gives you what the actual dom looks like. If you browse through the various dom elements you'll notice Firefox has added some of it's own style elements as well.


Solution:5

A.19. Explicit Elements

DO use explicit tbody elements within tables.

Rationale: While the content model of the table element permits the tbody element to be skipped, in HTML 4 this element is implicit. HTML 4 user agents will silently add this element, thus potentially confusing scripts or style sheets.

Source : http://www.w3.org/TR/2009/NOTE-xhtml-media-types-20090116/#compatGuidelines


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »