What is the purpose for HTML's tbody?

Question

What are the main reasons someone would use HTML's tbody in a table? Is it 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 (original, archived) plugin can then easily figure out what your data structure looks like.

Answer 2

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">

Answer 3

What if the header of the table is the first column in every row? In that case there's no way to specify the header of the table. It will actually break the HTML since the parser will assume that everything is part of the body of the table.

And why exactly is that tag necessary since the th specifies the header fields - the browser can find out which part of the table is the header by these fields.

What's the point of thead and tbody? They work for some cases and break the HTML in other cases. They duplicate the functionality of th. They complicate the code and may cause problems - Before I knew about tbody I assumed that tr-s are children of table.

Answer 4

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 5

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 6

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.

<table>
  <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
      <td>Sum</td>
      <td>$180</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
  </tbody>
</table>