HTML5 - 2017 right way to order <tbody> and <tfoot> elements? - html

Question

everyone!
I've saw in many articles and courses that the <tfoot> in a table element should be placed before the <tbody> element. Right... But, when I do it this way, the validator (https://validator.w3.org) tell me it's wrong, and that I can't use the <tfoot> in this context. So I decided to put the <tfoot> after the <tbody> and the validator don't found any errors in my code.
So... What is the correct way to do it, anyway?
I also found that spec that seems to be contradicted to its own: https://www.w3.org/TR/html51/tabular-data.html#the-tfoot-element

Answer 1

The <tfoot> spec rules were changed in December 2015 to disallow <tfoot> before <tbody> due to the accessibility issues it was causing.
As far as the W3C spec goes, the place to look for the relevant requirement is actually in the part of the spec that states the rules for what is allowed in the <table> element, which says:
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.
Notice that it says tfoot is allowed after tbody but no longer says it’s allowed before tbody.

Answer 2

A <table> element. The <tfoot> must appear after any <caption>, <colgroup>, <thead>, <tbody>, or <tr> element. Note that this is the requirement as of HTML5.
The element cannot be placed after any <tbody> and <tr> element. Note that this directly contradicts the above normative requirement from HTML5.
<table border="1" align="center">
<caption>A table</caption>
<thead>
<tr>
<th colspan="3">Invoice #123456789</th>
<th>14 January 2025
</tr>
<tr>
<td colspan="2">
<strong>Pay to:</strong><br> Acme Billing Co.<br> 123 Main St.<br> Cityville, NA 12345
</td>
<td colspan="2">
<strong>Customer:</strong><br> John Smith<br> 321 Willow Way<br> Southeast Northwestershire, MA 54321
</td>
</tr>
</thead>
<tbody>
<tr>
<th>Name / Description</th>
<th>Qty.</th>
<th>#</th>
<th>Cost</th>
</tr>
<tr>
<td>Paperclips</td>
<td>1000</td>
<td>0.01</td>
<td>10.00</td>
</tr>
<tr>
<td>Staples (box)</td>
<td>100</td>
<td>1.00</td>
<td>100.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Subtotal</th>
<td> 110.00</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td> 8% </td>
<td>8.80</td>
</tr>
<tr>
<th colspan="3">Grand Total</th>
<td>$ 118.80</td>
</tr>
</tfoot>
</table>