|Home | Web Design Tutorials | Free Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Member Perks | Member Login|
HTML tfoot Tag Tutorial
Browser SupportThe 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:
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.
Check out SEO for YOU now!
Almost a NewsletterSubscribe today for exclusive website design tutorials and grab some free gifts to boot! Learn more, or subcribe below:
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 ]
Home | Web Design Tutorials | Free Graphics | Newsletter | Products | Specials | SEO | Sound Effects