What is benefit of <thead>

What is benefit of using thead inste开发者_如何学运维ad of just td? If there is benefit...

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

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.

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.

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.

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.

<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 Repeat table headers in print mode

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.

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

Here is one advantage I found. Say you want to print a web-page that has so much rows that the whole table fits in more than one page (when you want it to be printed). thead will actually cause the browser to include the table header in all the pages(to which the table extends) and hence improve readability. You can read it here