What Is The Purpose for HTML's Tbody

What is the purpose for HTML's tbody?

To give semantic meaning to your table:

<table>
  <thead>
    <tr>
      <th>Person</th>
      <th>Amount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Person1</td>
      <td>$5.99</td>
      <td>02/03/09</td>
    </tr>
    <tr>
      <td>Person2</td>
      <td>$12.99</td>
      <td>08/15/09</td>
    </tr>
  </tbody>
</table>

According to the specification:

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.

The table head and table foot should contain information about the table's columns. The table body should contain rows of table data.

When present, each THEAD, TFOOT, and TBODY contains a row group. Each row group must contain at least one row, defined by the TR element.

Besides the important semantic importance of this (think screen readers), you can then easily style your headers apart from your data rows. Another relevant example is jQuery plugins such as the Tablesorter (original, archived) plugin can then easily figure out what your data structure looks like.

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.

What is benefit of thead

The thead, tbody, and tfoot elements in HTML are used to group table rows into logical sections based on their content. There are two main reasons you'd want to do this:

1. To allow the body to be scrolled
   independently of the header and/or
   footer

2. To make it easier to apply different
   style rules to the different
   sections of the table.

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.

Why should I use tbody thead tfoot?

A div is not allowed in places that thead, tbody, and tfoot are allowed.

Putting one there will force browsers to perform error recovery.

This can result in the div being entirely ignored as per this example (which attempts to place a div around the middle tr element):

Is it required to use thead, tbody and tfoot tags?

Those tags are not required. It is considered good form to use them if the table is used to represent data, which is what a table should be used for. If a table is used for laying out content they are typically omitted.

W3C

When to use tbody, colgroup, thead, etc, in an HTML table?

You use them if you want to supply additional information about your table and organize the content in it. They can also affect the visual rendering of your table in some ways (although this may vary across browsers — for example, support for <colgroup>/<col> is extremely patchy).

For example if you have header rows on the top and bottom you would group them in a <thead> and a <tfoot> respectively, and the data rows in a <tbody>. Browsers will ensure that the <tfoot> is always rendered at the bottom no matter whether you place it before or after any <tbody> or <tr> elements¹ or how much data you have in your table, which is useful if your table potentially has lots of rows:

<table>
  <caption>High Scores</caption>
  <thead>
    <tr><th>#</th><th>Name</th><th>Score</th></tr>
  </thead>
  <tfoot>
    <tr><th>#</th><th>Name</th><th>Score</th></tr>
  </tfoot>
  <tbody>
    <tr><td>1</td><td>Alice</td><td>10000</td></tr>
    <tr><td>2</td><td>Bob</td><td>9000</td></tr>
    <tr><td>3</td><td>Carol</td><td>8500</td></tr>
    <tr><td>4</td><td>Dave</td><td>8000</td></tr>
    <!-- Up to 100 data rows -->
  </tbody>
</table>

Otherwise by default all rows are grouped into a single <tbody> (even if you don't make explicit use of <tbody></tbody> tags within your table). Consequently, if you have header rows at the bottom of the table, you will have to place them at the very bottom of the table in order for them to appear last:

<table>
  <caption>High Scores</caption>
  <tr><th>#</th><th>Name</th><th>Score</th></tr>

  <tr><td>1</td><td>Alice</td><td>10000</td></tr>
  <tr><td>2</td><td>Bob</td><td>9000</td></tr>
  <tr><td>3</td><td>Carol</td><td>8500</td></tr>
  <tr><td>4</td><td>Dave</td><td>8000</td></tr>
  <!-- Up to 100 data rows -->

  <tr><th>#</th><th>Name</th><th>Score</th></tr>
</table>

And of course, this also makes it arguably less semantic if you care about that sort of thing.

---

¹ _{Note that it is required that a <tfoot>, if you use one, be placed before any <tbody> or <tr> elements in previous specifications up to and including HTML 4 and XHTML 1 for it to validate against those doctypes. This is no longer true as of HTML5.}

---

Related Topics