TFOOT in the table header | Rickard Andersson

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.


  1. Posted February 18, 2008 at 01:37 | Permalink

    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.

  2. Posted February 18, 2008 at 09:09 | Permalink

    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.

  3. Paul Sullivan
    Posted February 24, 2008 at 20:56 | Permalink

    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”.

  4. Posted February 25, 2008 at 07:56 | Permalink

    Aha! I wasn’t aware you could have more than one tbody. Thanks!

  5. Posted March 14, 2009 at 19:23 | Permalink

    This bit me. Thanks for your post – I put the tfoot before the tbody and my document validated.

  6. Posted March 15, 2010 at 11:29 | Permalink

    Thanks for the tip :)

  7. cavo789
    Posted April 8, 2010 at 12:52 | Permalink

    Thanks for the tip. Indeed, this solve my problem.

Post a Comment

Comments are moderated. Your email is never published nor shared.