在一个表中使用多个 head 或 tfoot 元素是否有效?

想象一个类似如下的列表:

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

现在忘记整个“表是为了数据而不是为了设计”的论点,我想为 list显示一个单独的表,并为 list中的每个条目分别提供一个 <thead><tbody>

这在技术上是有效的吗? 这在浏览器中是可行的,但是我的 蜘蛛的感觉在这个上面刺痛

63854 次浏览

You can have as many <tbody> elements as you want, but no more than one each of <thead> and <tfoot>. Reference:

Content model:

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.

I consider it to be just like id attributes. They are supposed to be unique, but you can actually re-use it in the same page and you can still select it. That said, just because it can be done doesn't mean it should be done.

I would recommend against it.

There's at most one thead and one tfoot allowed, so you shouldn't create additional headers. After all the th in a thead gives a meaning to your columns, like "time of day", "temperature", "amount of cats currently on fire".

If the entries in your list are related they should all be in the same table and you should provide a fitting header to display that relation.

If the entries are actually unrelated you should provide a single table for every of those. You can still apply the same CSS on every table to get a nice result.