tags:

views:

241

answers:

9

Hello, What is benefit of using thead instead of just td? If there is benefit...

+2  A: 

Using thead, tfoot and tbody let you apply special formatting to the respective parts of the table. For instance, you can include the header and the footer on all the printed pages of your table, or you can make the tbody scroll while the thead & tfoot would remain static.

Nathan DeWitt
+11  A: 

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.

Syntactic
Additionally, I think screen readers can make use of the 'thead/tbody/tfoot' elements. Can't find where I read that though.
s_hewitt
I have no experience with screen readers, but I'd say that's very probable.
Syntactic
A: 

THEAD is intended to wrap all header rows. Its counterparts are TBODY and TFOOT. They are useful if you want to differentiate those rows via CSS or JavaScript.

Jeff Meatball Yang
A: 

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.

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3

metal-gear-solid
A: 

<thead> <tbody> and <tfoot> mark specific sections of the table (you put rows inside of them) as being the header, body and footer of the table. This can be used to repeat headers and footers on each table (some browsers do it by default, others seem to need help). See http://stackoverflow.com/questions/274149/css-repeat-table-headers-in-print-mode

Ken Bloom
+2  A: 

The thead and td are in no way comparable. The thead just represents a table header and the td a table cell.

<table>
    <thead>
        <tr><th>head1</th><th>head2</th></tr>
    </thead>
    <tbody>
        <tr><td>row1col1</td><td>row1col2</td></tr>
        <tr><td>row2col1</td><td>row2col2</td></tr>
    </tbody>
</table>

Also see the w3schools tutorial.

A semantic benefit is that you separate the table header from the table body (and if any, also the table footer which can be represented by <tfoot>). The technical benefit is that you can style them separately and for example easily achieve a table with a scrollable body with a fixed header/footer by just giving the <tbody> a fixed height and an overflow. Unfortunately MSIE is the only browser which doesn't support it.

BalusC
A: 

From the w3c 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.

Hope this helps.

Rajat
A: 

thead is not used very often. It identifies a section of a table that is the "header" and is sort of a hint to the browser that the user might want to see this piece, even if he scrolls the rest of the table up and down. http://www.w3schools.com/tags/tag_thead.asp

joefis
+2  A: 

I don't see it mentioned here yet, but another benefit is that in most browsers you can actually code <thead>, <tfoot>, and <tbody> out of order and they will appear in the right place on the table. While obscure, I have taken advantage of this before. For example:

<?php $count = 0; ?>
<table>
  <tbody>
    <?php foreach($foo as $f):?>
      <tr>...</tr>
      <?php $count++; ?>
    <?php endforeach; ?>
  </tbody>
  <thead>
    <th>Entries (<?=$count?> total)</th>
    ...
  </thead>
</table>

I wanted a total number of rows listed in the header, so I incremented a counter in my foreach() and put the <thead> at the bottom, so that I could use the value of $count in my header.

Certainly not the main benefit, but a benefit nonetheless.

njbair
Actually, the `thead` and `tfoot` elements must come before the `tbody` element. Although browsers will be flexible with that and render the table best they can.
DisgruntledGoat