HTML tfoot Tag Tutorial

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. Yes, as odd as it may seem at first, the tfoot element is coded before the tbody element.

Dividing a table in this way is supposed to allow a table to be a fixed height, and if there is more data than will fit in designated height, the body of the table could be scrolled independently of the table head and foot. The only trouble is, browser support isn't very good for the "scrolling" part of the idea at the time of this writing.

When long tables are printed, the table head and foot information may be repeated on each page that contains table data. If I recall correctly, that's part of the reason for having the tfoot coded before the tbody. I think the other reason is so a table with a lot of data can load the header and footer and have it in place while the rest of the table is being downloaded.

Note that the thead, tfoot, and tbody elements will not affect the layout of the table by default. However, you can use CSS to let these elements affect the table's layout.

Here's an example:

<table border="1">
<thead>
     <tr> 
       <th>header information...</th>
     </tr>
</thead>
<tfoot>
     <tr> 
       <td>footer information...</td>
     </tr>
</tfoot>
<tbody>
     <tr> 
       <td> first row of block one data... </td>
     <tr> 
       <td> second row of block one data... </td>
</tbody>
<tbody>
     <tr> 
       <td> first row of block two data... </td>
     <tr> 
       <td> second row of block two data... </td>
     <tr> 
       <td> third row of block two data... </td>
</tbody>
</table>

Here's how that looks on a web page:

Of course, you would probably want more than just one table data cell in each row, and you might want to pretty up the table some with CSS, but this shows you the basics.

Since browsers generally don't support the scrolling table body yet, the main reason to use the thead, tfoot, and tbody elements is to apply CSS to blocks of table content.

Based on your interest in this tutorial you may also be interested in:

• HTML Table Tag Tutorial
• HTML Table TD Tutorial
• HTML Table TR Tutorial
• HTML Table TH Tutorial
• HTML Table Caption Tutorial
• HTML Col Tag Tutorial
• HTML Colgroup Tutorial
• HTML Colgroup Tutorial
• HTML thead Tutorial
• HTML tbody Tutorial