What is benefit of using thead instead of just td? If there is benefit...
-
You know, the funny thing is that I first thought that was a typo for #include <thread> before I saw the tags....– Billy ONealCommented Apr 23, 2010 at 16:54
-
wow, thanks everybody for all the answers– Praheed60Commented Apr 23, 2010 at 16:56
-
2The answers provided are good at addressing your question about <thead>. It's important to note that you should but <th> elements in your <thead> row to mark them as "table header cells".– Zack The HumanCommented Apr 23, 2010 at 16:56
10 Answers
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:
To allow the body to be scrolled independently of the header and/or footer
To make it easier to apply different style rules to the different sections of the table.
-
Additionally, I think screen readers can make use of the 'thead/tbody/tfoot' elements. Can't find where I read that though.– s_hewittCommented Apr 23, 2010 at 22:13
-
I have no experience with screen readers, but I'd say that's very probable. Commented Apr 24, 2010 at 4:13
-
@Syntactic How do i implement your point 1? I am using thead for my table– ishanCommented Mar 27, 2013 at 4:08
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.
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.
-
2Actually, the
thead
andtfoot
elements must come before thetbody
element. Although browsers will be flexible with that and render the table best they can. Commented Apr 28, 2010 at 12:05
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