在表格中使用多个thead或tfoot元素是否有效？

Question

想象一下类似于这个的列表：

var list = [
  { name: 'group1', 
    items: [ 1, 2, 3, 4, 5 ]
  },
  { name: 'group2', 
    items: [ 1, 2, 3, 4, 5 ]
  },
  etc...
]

现在忘记关于“表格是用于数据而非设计”的争论，我希望展示一个单一的表格用于list并为每个list条目拥有一个独立的<thead>和<tbody>。

这在技术上是否有效？这在浏览器中可以工作，但我对此有所担忧（参考链接）。

- AlbertEngelB

Answer 1

您可以拥有任意数量的元素，但是和元素只能各有一个。参考：此处：

内容模型：

顺序为：可选的标题元素，后跟零个或多个colgroup元素，然后可选择地是thead元素，后跟零个或多个tbody元素或一个或多个tr元素，最后可选择地是tfoot元素，可与一个或多个支持脚本的元素相间隔。

- Jon

---

你可以在普通的 tr 中使用 th scope=rowgroup 来描述每个 tbody。请参见 "Example"。 - CletusW

Answer 2

最多只能有一个 thead 和一个 tfoot allowed，因此您不应创建其他标题。毕竟，thead 中的所有 th 为您的列提供了含义，例如“时间”，“温度”，“当前着火的猫的数量”。

如果列表中的条目相关，则它们都应在同一张表格中，并且您应该提供适当的标题来显示该关系。

如果实际上这些条目没有关联，则应为每个条目提供单独的表格。您仍然可以在每个表格上应用相同的 CSS 以获得良好的结果。

- Zeta

---

如果您列表中的条目有关联，则它们应该放在同一张表格中，并提供适当的表头以显示它们之间的关系。我认为，在非常长的表格中重复相同的表头有时是可取的，这样用户就不必滚动回到顶部来记住列的名称。当然，还有其他解决方案（例如使用JavaScript创建“粘性”表格标题或在表格行元素上使用CSS使其在视觉上与其他行不同）。 - Mike

Answer 3

我认为它就像ID属性一样。它们应该是唯一的，但实际上你可以在同一页中重复使用并且仍然可以选择它。话虽如此，仅仅因为可以做到并不意味着应该这样做。

我建议不要这样做。

- Justin

---

拥有多个<tbody>并没有任何问题，但是根据规范，只能有一个<thead>和一个<tfoot>。 - Pointy

从我所看到的，他并没有建议这样做。只是说在浏览器中可以工作？ - AlbertEngelB