search engine optimization articles do it yourself seo hiring search engine experts html and search engine optimization web site analysis and submission service

HTML tfoot Tag Tutorial

Browser Support

Internet Explorer Firefox Opera Safari Chrome

The HTML tfoot element is used to add a footer to a table. Note that you do not need to use the thead, tfoot, and tbody elements with a table, but they do offer advantages at times.

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:

header information...
footer information...
first row of block one data...
second row of block one data...
first row of block two data...
second row of block two data...
third row of block two data...

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:

This concludes the HTML Table tfoot Tutorial.
Back | HTML Tag Chart | HTML Index | Web Design Tutorials
search engine optimization course
If you want your web site to rank high in the search engines . . . what are you going to do to get it there? Check out my search engine optmization guide, SEO for YOU: Search Engine Optimization for Ordinary Everyday People!

Check out SEO for YOU now!

Almost a Newsletter

Subscribe today for exclusive website design tutorials and grab some free gifts to boot! Learn more, or subcribe below:
Email:

First Name:

Privacy Policy

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)