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

【问题标题】：Is it valid to use more than one thead or tfoot element in a table?在表格中使用多个 thead 或 tfoot 元素是否有效？
【发布时间】：2013-04-22 19:42:22
【问题描述】：

想象一个类似这样的列表：

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

现在忘记了整个“表格用于数据而非设计”的论点，我想为list 显示一个表格，并为list 中的每个条目分别显示<thead> 和<tbody>。

这在技术上有效吗？这适用于浏览器，但我的spider senses are tingling on this one。

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以拥有任意数量的<tbody> 元素，但<thead> 和<tfoot> 各不超过一个。 Reference:

内容模型：

按此顺序：可选的标题元素，后跟由零个或多个 colgroup 元素，后跟可选的 thead 元素，后跟零个或多个 tbody 元素或一个或多个 tr 元素，后跟可选的 tfoot 元素，可选与一个或多个脚本支持元素混合在一起。

【讨论】：

您可以在常规tr 中使用th scope=rowgroup 来描述每个tbody。见"Example"。

【解决方案2】：

最多有一个thead 和一个tfoot allowed，因此您不应创建额外的标头。毕竟thead 中的th 为您的列赋予了意义，例如“一天中的时间”、“温度”、“目前着火的猫的数量”。

如果列表中的条目是相关的，它们应该都在同一个表中，并且您应该提供一个合适的标题来显示这种关系。

如果条目实际上不相关，您应该为每个条目提供一个表格。您仍然可以在每个表格上应用相同的 CSS 以获得良好的结果。

【讨论】：

“如果列表中的条目是相关的，它们都应该在同一个表中，并且你应该提供一个合适的标题来显示这种关系”——我认为在很长的时间内重复相同的标题table 有时是可取的，因此用户不必滚动回顶部来记住列是什么。当然，还有其他解决方案（例如，JavaScript 在表格行元素上使用“粘性”表格标题或 CSS 以使其在视觉上与其他行不同）。

【解决方案3】：

我认为它就像id 属性。它们应该是唯一的，但您实际上可以在同一页面中重复使用它并且您仍然可以选择它。 就是说，能做不代表就应该做。

我建议不要这样做。

【讨论】：

拥有多个<tbody> 并没有错，但根据规范，<thead> 和一个<tfoot> 可以只有一个。
据我所知，他根本不建议这样做。只是说它在浏览器中工作？