Column Footers - tfoot

The tfoot element is used in a very similar way to the thead element except that instead of appearing at the top of the table and the top of every page where the table prints over more than one page, the tfoot defines one or more rows of information to display at the bottom of the table and the bottom of each page where the table prints over multiple pages. Needing footers for the columns is a good indication that you should be using a table.

The tfoot container directly follows the thead container specifically because there is no way to tell where in the table that the first page break will occur and the browser needs to know what footer information to display at that point before it gets that far through the table. This container therefore must be placed before the main content of the table rather than after it as you would reasonably expect.

So what goes inside the tfoot container? Let's continue with our three columns example.

<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>

As with the thead, the tfoot also contains one or more tr table row elements. In this instance since the footer doesn't normally contain headings the td detail elements are the more appropriate elements to hold our footer content rather than th header elements. The same rules apply to tr elements where ever they occur within a table.

Table detail elements work exactly the same as table heading elements and so everything that you already know about the th also applies to the td. The only reason for there being two different containers you can use is to make it easier to distinguish between headings and content.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow