Is it valid to use more than one thead or tfoot element in a table?

Question

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.

Answer 1

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.

Answer 2

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.