Why do browsers insert tbody element into table elements?
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.
Why do browsers still inject tbody in HTML5?
The answer of "backwards compatiblity" makes absolutely zero sense
because I specifically opted in for a HTML5 doctype.
However, browsers don't differentiate between versions of HTML. HTML documents with HTML5 doctype and with HTML4 doctype (with the small exception of HTML4 transitional doctype without URL in FPI) are parsed and rendered the same way.
I'll quote the relevant part of HTML5 parser description:
8.2.5.4.9 The "in table" insertion mode
...
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.
Is it necessary to have tbody in every table?
Only if you define thead
and tfoot
. It is mostly used when the table has multiple bodies of content. If the data in the table is easily understood to be the tbody
then you can safely omit it.
Related Topics
How to Make an HTML Button Not Reload the Page
Center Image Horizontally Within a Div
Can You Provide Examples of Parsing Html
Make Footer Stick to Bottom of Page Correctly
How to Escape Ampersands in Xml So They Are Rendered as Entities in Html
Linking to Another HTML Page in Google Apps Script
Custom HTML Tag Attributes Are Not Rendered by Jsf
Does Form Data Still Transfer If the Input Tag Has No Name
Onclick on Option Tag Not Working on Ie and Chrome
How to Create Uneven Rounded Sides on a Div
Bootstrap Full-Width With 2 Different Backgrounds (And 2 Columns)
How to Change Bootstrap 3 Column Order on Mobile Layout
Css Two Divs Next to Each Other
How to Force Link from Iframe to Be Opened in the Parent Window
Is ≪Img≫ Element Block Level or Inline Level
How to Remove the Arrow from a Select Element in Firefox
Using ≪Style≫ Tags in the ≪Body≫ With Other Html
Freeze the Top Row For an HTML Table Only (Fixed Table Header Scrolling)