TFOOT in the table header
Today was my first encounter with the HTML tag <tfoot>. It’s a tag that represents the footer of a table. There’s <thead> for the header and <tbody> for the, drum roll, body. I carefully constructed the markup for my PHP script that listed incoming orders in a e-commerce application. My plan was to sum up the order totals and display them in the footer of the table. I did this by adding each order total to a variable in the tbody loop and then echo’ed the sum in the tfoot. Everything was working beautifully until I decided to run my markup through the W3C validator. This turned up:
document type does not allow element “tfoot” here.
I looked through the markup and couldn’t find anything wrong with it. I then had a look in the HTML 4.01 spec regarding tfoot and noticed the following:
TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.
The footer must appear before the body! Call me stupid, but why would a browser want to display the footer before the rest of the table has been rendered?
In my case, I had two choices. I either jump through hoops and somehow calculate the order sum before I start outputting the body of the table (a rather complex operation, I might add) or I just leave tfoot out of the equation completely and use a regular table row in the body to represent the footer. I chose the latter.
4 comments
You have to put it before yes, but I thought that it would display it after the body. I believe this is true. and are simply useful for printing out HTML pages as it will display the header and footer on each printed page.
I don’t see how running the calucation would be hard before displaying it. Just store what you want to be displayed and display it later. Or store the output in a buffer or something.
In my case, I would have to run through the query result set twice. First one time in order to calculate the sum total before I start outputting the table and then once more when I actually output the table body.
The other use for tfoot if for duplicating thead. That way when the header scolls off the top of the page you can still see the column headers in tfoot. I also seem to remember it was intended to allow tbody to scroll but leave thead and tfoot static.
If you want a logical seperation of subtotals the way to do it is a second tbody with a class of “subtotals”.
Aha! I wasn’t aware you could have more than one tbody. Thanks!