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?
can a go at the bottom of a table?
Asked
Active
Viewed 1.8k times
16
bloudermilk
- 17,820
- 15
- 68
- 98
-
2
Please post your entire `
` block
– Michael Haren
Jan 13 '10 at 02:10
-
2
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.
– Mr Lister
Apr 19 '14 at 11:18
-
1
Have you [forgotten the `
` or `` in ` `](http://stackoverflow.com/a/13345385/1269037)?
– Dan Dascalescu
Oct 10 '14 at 06:00
5 Answers
22
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.
nickf
- 537,072
- 198
- 649
- 721
-
-
3
+1 For explaining the reason why the tfoot tag should be above the tbody tag.
– 3urdoch
Jul 05 '13 at 09:16
-
Pity we can't place it like the footer tag, there could be valid reasons to have it visually positioned elsewhere but hey-ho.
– Ric
Feb 04 '15 at 15:29
-
1
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.
– Ruudt
May 13 '15 at 07:40
-
1
I prefer to put `tfoot` after `tbody`, otherwise when you click & drag to select the text it jumps around.
– rybo111
Jan 30 '16 at 13:42
17
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.
Martin Yankov
- 351
- 3
- 7
17
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:
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.
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.
-
The name `tfoot` is misleading I think. That might be what caused the confusion.
– Sampson
Jan 13 '10 at 02:16
-
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
– nickf
Jan 14 '10 at 01:40
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
K Prime
- 5,809
- 1
- 25
- 19
-
1
`` doesn't strictly need to be before ``, see this [example from msdn](http://msdn.microsoft.com/en-us/library/ie/ms535907(v=vs.85).aspx).
– T J
Oct 03 '14 at 18:09
-
As [rybo111](https://stackoverflow.com/users/1094772/rybo111) mentioned above, having the `` before the `` can mess up text selection. Also see https://github.com/whatwg/html/issues/352
– mistajolly
Aug 17 '17 at 10:27
0
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!
user3715138
- 11
- 3
Asked
Active
Viewed 1.8k times
16
bloudermilk
- 17,820
- 15
- 68
- 98
-
2Please post your entire `
` block
– Michael Haren Jan 13 '10 at 02:10 -
2Note 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. – Mr Lister Apr 19 '14 at 11:18
-
1Have you [forgotten the `
` or ` `](http://stackoverflow.com/a/13345385/1269037)? – Dan Dascalescu Oct 10 '14 at 06:00` in `
5 Answers
22
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.
nickf
- 537,072
- 198
- 649
- 721
-
-
3+1 For explaining the reason why the tfoot tag should be above the tbody tag. – 3urdoch Jul 05 '13 at 09:16
-
Pity we can't place it like the footer tag, there could be valid reasons to have it visually positioned elsewhere but hey-ho. – Ric Feb 04 '15 at 15:29
-
1Screenreaders 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. – Ruudt May 13 '15 at 07:40
-
1I prefer to put `tfoot` after `tbody`, otherwise when you click & drag to select the text it jumps around. – rybo111 Jan 30 '16 at 13:42
17
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.
Martin Yankov
- 351
- 3
- 7
17
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:
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.
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.
-
The name `tfoot` is misleading I think. That might be what caused the confusion. – Sampson Jan 13 '10 at 02:16
-
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 – nickf Jan 14 '10 at 01:40
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
K Prime
- 5,809
- 1
- 25
- 19
-
1`` doesn't strictly need to be before ``, see this [example from msdn](http://msdn.microsoft.com/en-us/library/ie/ms535907(v=vs.85).aspx). – T J Oct 03 '14 at 18:09
-
As [rybo111](https://stackoverflow.com/users/1094772/rybo111) mentioned above, having the `` before the `` can mess up text selection. Also see https://github.com/whatwg/html/issues/352 – mistajolly Aug 17 '17 at 10:27
0
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!
user3715138
- 11
- 3