一个 <tfoot> 标签可以放在表格的底部吗？

Question

我想在表格中使用 <tfoot> 标签以达到语义正确，但它总是显示在表格顶部。有没有方法让它显示在底部？

- bloudermilk

---

请发布您整个 <table> 块。 - Michael Haren

请注意，答案没有提到在HTML 4.01中，在任何tbody后面放置tfoot是一个错误。这只有在HTML5中正式允许。这就是为什么许多HTML编辑器重新排列表格，使tfoot位于顶部的原因。 - Mr Lister

你是否在<tfoot>标签中忘记了<tr>或<td>？ - Dan Dascalescu

Answer 1

如其他人所说，tfoot在tbody之前定义，但在渲染时会放在后面。 这是有意为之的，不会改变语义（一个表格有头、脚和身体 - 顺序并不重要）

这么做的原因是让脚部可以在身体仍在下载时加载和显示在屏幕上，以便您仍然可以阅读脚部中的摘要信息。虽然这在今天几乎没什么用，但对于连接缓慢且有大量数据的表格，您可能仍然会看到有益之处。

- nickf

---

当标准不合理时，这不是很烦人吗？“ACBDEFG…” - Nick Bedford

把tfoot标签放在tbody标签上方的原因是什么？+1 - 3urdoch

很遗憾我们不能像页脚标签一样放置它，可能有合理的理由将其视觉位置放在其他地方，但是嘿呵。 - Ric

屏幕阅读器也能从中受益。视力障碍者不必在阅读页脚之前阅读完整个表格，而页脚通常包含比随机单元格更相关的内容。 - Ruudt

我更喜欢在 tbody 后放置 tfoot，否则当你点击并拖动选择文本时，它会跳来跳去。 - rybo111

Answer 2

根据规范，您可以将 tfoot 放在 tbody 元素之前或之后。请参见此链接中的以下说明。

可使用此元素的上下文：

1. 作为 table 元素的子元素，在任何标题、colgroup、thead 元素之后和任何 tbody 和 tr 元素之前，但仅在没有其他 tfoot 元素是 table 元素的子元素时。

2. 作为 table 元素的子元素，在任何标题、colgroup、thead、tbody 和 tr 元素之后，但仅在没有其他 tfoot 元素是 table 元素的子元素时。

无论将标记放在哪里，页脚信息都会在视觉上显示在底部。

- Sampson

---

我认为 tfoot 这个名称有误导性。这可能是造成混淆的原因。 - Sampson

这并不具有误导性——它是表格的页脚。问题在于假设你必须在特定位置定义它。 - nickf

Answer 3

<tfoot> 可以显示在整个 <table> 的顶部，如果 <tfoot> 的内容不在 <tr> 和 <td> 标签中并且未包含在表格内。

- Martin Yankov

---

谢谢，这就是让我明白了。 - remi90

Answer 4

您的表格应该如下所示：

<table>
    <thead>...</thead>
    <tfoot>...</tfoot>
    <tbody>...</tbody>
</table>

使用 tfoot 出现在 tbody 上方，但它会在表格底部呈现。

- K Prime

---

<tfoot> 不一定需要在 <tbody> 之前，可以参考这个 msdn 的例子。 - T J

正如rybo111上面提到的，将<tfoot>放在<tbody>之前可能会破坏文本选择。另请参见https://github.com/whatwg/html/issues/352。 - mistajolly

Answer 5

我知道这个问题早前已经被问到过了，但是我想在已有的评论中添加我的tfoot经验。当我在tfoot元素上加入CSS的"display:block"属性时，它出现在thead和tbody之间，而不是在底部。当移除"display:block"后，它就可以正确地显示。我浪费了一些时间才发现这个问题，所以我希望我的答案可以帮助其他人节省时间和烦恼！

- user3715138