Is there a direct purpose for HTML's tbody?

Question

What are the main reasons someone would use HTML's tbody in a table, just for formatting purposes?

I use "head" and "body" generally, I haven't used "thead" and "tbody".

Answer 1

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 plugin can then easily figure out what your data structure looks like.

Answer 2

To separate the header (thead), body (tbody) and footer (tfoot) parts of an HTML table. This is incredibly useful. A typical use is to put your column headers in your thead element and the data in tbody. The tfoot element is less common but sometimes useful.

By the way, even if you don't specify tbody, it is implicitly created for you anyway.

You can use this for styling purposes too eg:

table thead tr { background-color: yellow; }
table tbody tr { background-color: #C9C9C9; }

It's also useful in Javascript and jQuery for having tables with selectable rows (just as one example). You're generally only interested in selecting or highlighting rows in the tbody, not the header row at the top.

Answer 3

It can be used for styling, yes, and it's also useful for jQuery selectors to help discriminate which elements you want to select. After all, you can have tr tags in thead or tbody.

Answer 4

One great use I've found for tbody is to allow for the rows to be scrollable while keeping the column header and footer visible. This only works in browsers that actually support css though. Sorry no Internet Explorer!

<tbody style="height: 150px; overflow-y: scroll">