11

I was reading in a forum about <tfoot> element that it must come after <thead> element. In contrast I saw some people use the order <thead><tbody><tfoot>. So what is the correct and best to follow order?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
miami
  • 245
  • 1
  • 2
  • 5

3 Answers3

26

Before HTML5, <tfoot> had to come after <thead> and before <tbody>. With HTML5, <tfoot> can come before <tbody> or after it. But there must be only one <tfoot> child of a <table> element, and it must be after <thead>.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • 7
    For readers that aren't inclined to scroll further: as of Dec 2015 the spec no longer allows the pre-HTML5 behavior [due to accessibility issues](https://github.com/whatwg/html/commit/94d55af9cda601ce675d15f6a0e52c9bb9c6afa9) (this change is reflected in W3C HTML 5.1 and later), and validators now enforce this by emitting an error when encountering a tbody after a tfoot in a document with the living doctype. – BoltClock Jun 20 '18 at 05:18
5

According to the W3 specs, tfoot has to come before tbody. (Links to specs here -> Why do internal TABLE sections have to go THEAD TFOOT TBODY to validate?)

This was done to allow the header and footer of a table to load first, before loading in a variable amount of body data, which would otherwise possibly block the loading of the table footer.

Community
  • 1
  • 1
Marijke Luttekes
  • 1,253
  • 1
  • 12
  • 27
  • I like @Alohci's answer too. – Marijke Luttekes Sep 19 '13 at 18:18
  • 3
    According the W3 specs, in HTML5 it may also coma after the `tbody` tag! And this question is about HTML5.. http://www.w3.org/TR/html5/tabular-data.html#the-tfoot-element – Timo002 Jun 25 '14 at 08:44
  • 1
    @Timo002, Where in the original question is html5 stated? I don't see any reference to html5 in the OP, only 'html'. I only see a reference to html5 in Alochi's answer. – Perry Tew Sep 16 '16 at 14:22
  • 1
    @PerryTew The question was specifically about HTML5. Answers that address other versions should mention what versions they mean explicitly. – Mr Lister Aug 02 '22 at 08:11
3

In the HTML 5.1 spec, <tfoot> can only come after <tbody>.

In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element, optionally intermixed with one or more script-supporting elements.

https://www.w3.org/TR/html51/tabular-data.html#tabular-data

Mats Lundström
  • 47
  • 2
  • 3
    The documentation you link to does not support your statement that `` can only come after ``. In fact, the documentation explicitly states that the closing `` tag can be omitted if the element is **followed** by a `` tag. – Paul Rowe Jun 05 '17 at 16:17
  • @Paul Rowe: Regardless, every known validator now emits an error when encountering a tbody that follows a tfoot. I suspect that statement about end tags was left in there to accommodate legacy behavior, i.e. for when a tbody could still follow a tfoot. Apparently the restriction was added [due to accessibility issues that was causing](https://github.com/whatwg/html/commit/94d55af9cda601ce675d15f6a0e52c9bb9c6afa9). – BoltClock Jun 20 '18 at 04:59