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

Question

各位！我在很多文章和课程中看到，table 元素中的 <tfoot> 应该放在 <tbody> 元素之前。对...但是，当我这样做时，验证器 (https://validator.w3.org) 告诉我这是错误的，并且我不能在这种情况下使用 <tfoot>。所以我决定将 <tfoot> 放在 <tbody> 之后，验证器没有在我的代码中发现任何错误。那么...无论如何，正确的方法是什么？我还发现该规范似乎与其自身相矛盾：https://www.w3.org/TR/html51/tabular-data.html#the-tfoot-element

Answer 1

<tfoot> 规范规则 were changed in December 2015 to disallow <tfoot> before <tbody> due to the accessibility issues it was causing。

就 W3C 规范而言，查找相关要求的地方实际上是在 the part of the spec that states the rules for what is allowed in the <table> element 中，它说：

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.

请注意，它说 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>

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

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

html

html-table

w3c-validation