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

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.

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. >

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.

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.