96

Imagine a list of lists similar to this:

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

Now forgetting the whole "tables are for data not design" argument, I wanted to display a single table for list and have a seperate <thead> and <tbody> for each entry in list.

Is this technically valid? This works in the browser, but my spider senses are tingling on this one.

Sumit
  • 2,242
  • 1
  • 24
  • 37
AlbertEngelB
  • 16,016
  • 15
  • 66
  • 93

3 Answers3

137

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.

Jon
  • 428,835
  • 81
  • 738
  • 806
  • And you can use `th scope=rowgroup` inside a regular `tr` to describe each `tbody`. See ["Example"](https://html.spec.whatwg.org/multipage/tables.html#the-th-element). – CletusW Feb 12 '20 at 20:20
12

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.

Zeta
  • 103,620
  • 13
  • 194
  • 236
  • 7
    "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" -- I think that repeating the same header in a very long table would sometimes be desirable so the user doesn't have to scroll back to the top to remember what the columns are. Of course, there are other solutions to this (e.g. JavaScript to use a "sticky" table header or CSS on table row elements to make it visually different than the other rows). – Mike Nov 17 '15 at 00:25
5

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.

Justin
  • 3,337
  • 3
  • 16
  • 27
  • 3
    There's nothing at all wrong with having more than one ``, but according the spec there can be just one `` and one ``. – Pointy Apr 22 '13 at 19:49
  • From what I can tell, he wasn't suggesting to do it at all. Just saying it worked in the browser? – AlbertEngelB Apr 22 '13 at 19:49