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.