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.

0

3 Answers 3

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.

1
  • And you can use th scope=rowgroup inside a regular tr to describe each tbody. See "Example".
    – CletusW
    Feb 12, 2020 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.

1
  • 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, 2015 at 0: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.

2
  • 3
    There's nothing at all wrong with having more than one <tbody>, but according the spec there can be just one <thead> and one <tfoot>.
    – Pointy
    Apr 22, 2013 at 19:49
  • From what I can tell, he wasn't suggesting to do it at all. Just saying it worked in the browser? Apr 22, 2013 at 19:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.