HTML5 - 2017 正确的订购<tbody>方式和<tfoot>元素？

Question

大家！ 我在许多文章和课程中看到，表元素中的<tfoot>应该放在<tbody>元素之前。右。。。但是，当我这样做时，验证者(https://validator.w3.org(告诉我这是错误的，我不能在这种情况下使用<tfoot>。所以我决定把<tfoot>放在<tbody>之后，验证器在我的代码中没有发现任何错误。 所以。。。到底正确的方法是什么？ 我还发现那个规范似乎与它自己的规范相矛盾：https://www.w3.org/TR/html51/tabular-data.html#the-tfoot-element

Answer 1

<tfoot>规范规则于 2015 年 12 月进行了更改，不允许在<tbody>之前<tfoot>，因为它会导致可访问性问题。

就 W3C 规范而言，查找相关要求的地方实际上是在规范中陈述<table>元素中允许的规则的部分，其中说：

按以下顺序：可选caption元素，后跟零个或多个colgroup元素，后跟一个thead元素(可选(，后跟零个或多个tbody元素或一个或多个tr元素，后跟一个tfoot元素，可选择与一个或多个脚本支持元素混合。

请注意，它说tfoot在tbody之后是允许的，但不再说在tbody之前是允许的。

Answer 2

<table>元素。<tfoot>必须出现在任何<caption>, <colgroup>, <thead>, <tbody>, or <tr>元素之后。 请注意，这是HTML5的要求。

该元素不能放置在任何<tbody>和<tr>元素之后。请注意，这直接与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>