can a <tfoot> go at the bottom of a table?

Question

I'd like to use a <tfoot> tag in a table to be semantically correct, but it keeps showing up at the the top of my table. Is there a way to tell it to display at the bottom?

Seidel

Please post your entire <table> block – Olfactory

Note that the answers don't mention the fact that in HTML 4.01, putting the tfoot after any tbody in the source was an error. (It's only since HTML5 that this is formally allowed.) That's the reason many HTML editors rearrange the table so that the tfoot is on top. – Cheesecake

Have you forgotten the <tr> or <td> in <tfoot>? – Mafalda

Answer 1

According to the specification, you may place the tfoot before, or after, the tbody element(s). See the following description from the previous link.

Contexts in which this element can be used:

1. As a child of a table element, after any caption, colgroup, and thead elements and before any tbody and tr elements, but only if there are no other tfoot elements that are children of the table element.

2. As a child of a table element, after any caption, colgroup, thead, tbody, and tr elements, but only if there are no other tfoot elements that are children of the table element.

Regardless of where you place the markup, the footer information will be displayed at the bottom visually.

Krein

The name tfoot is misleading I think. That might be what caused the confusion. – Krein

it's not misleading at all - it's the footer for the table. the problem is just assuming that you have to define it in a certain place – Baptlsta

Answer 2

As others have said, tfoot is defined before the tbody but rendered afterwards. This is by design and doesn't change the semantics (a table has a head, a foot and a body - the order of these doesn't matter)

The reason it's done this way is so that the foot can be loaded and displayed on screen while the body is still downloading, so you can still read the summary information you have in the foot. It's virtually moot these days, but with a slow connection and a massive table, you might still see the benefits.

Baptlsta

Ain't it annoying when standards don't make sense. "ACBDEFG..." – Polynesia

+1 For explaining the reason why the tfoot tag should be above the tbody tag. – Momentarily

Pity we can't place it like the footer tag, there could be valid reasons to have it visually positioned elsewhere but hey-ho. – Dingy

Screenreaders benefit from this as well. Visually impaired people don't have to read the full table before reading the footer, which in most cases contains more relevant content than a random cell. – Chill

I prefer to put tfoot after tbody, otherwise when you click & drag to select the text it jumps around. – Dorian

Answer 3

The <tfoot> can show on top of the whole <table> if the contents of the <tfoot> are not in <tr> and <td> tags and respectively - not in the table.

Intervale

Answer 4

Your table should look like the following:

<table>
    <thead>...</thead>
    <tfoot>...</tfoot>
    <tbody>...</tbody>
</table>

with tfoot appearing above tbody. It will render, though, at the bottom of the table

Animato

<tfoot> doesn't strictly need to be before <tbody>, see this example from msdn. – Vitrescent

As rybo111 mentioned above, having the <tfoot> before the <tbody> can mess up text selection. Also see github.com/whatwg/html/issues/352 – Cathern

Answer 5

I am aware that this question was asked a while ago but I thought that I would add my experience of tfoot to the comments already made. When I added CSS "display:block" to the tfoot element, it appeared between thead and tbody, not at the bottom. When display:block was removed, it displayed correctly. I wasted some time working this one out, so I hope my answer will help someone else to save time and aggravation!

Bellini