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

admin管理员组

文章数量:1136509

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.

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.

• javascript
• html

Share Improve this question Follow edited Aug 29, 2022 at 10:46 Sumit 2,38722 gold badges2727 silver badges4141 bronze badges asked Apr 22, 2013 at 19:42 AlbertEngelBAlbertEngelB 16.4k1515 gold badges6868 silver badges9797 bronze badges 0

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 138

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.

Pseudo-table

As said by others, you can't have several thead nor tfoot in a table. But you can mimic them considering each tbody as a peuso-nested-table.

Pseudo-heading

Considering you can have as many tbody as you want, there is stil, if not empty, a first row tr in each one. You can consider this first row as pseudo-heading. You can have th cells in it. You can apply them a specific CSS style with the CSS selector tbody tr:first-child th. You can select those rows and make stuff with JavaScript with :

document.querySelectorAll("tbody tr:first-child").forEach(myStuffFunction);

or for a specific table :

myTable.querySelectorAll("tbody tr:first-child").forEach(myTableStuffFunction);

Pseudo-footer

The same thing can be done for pseudo-footer with the CSS selector tbody tr:last-child th

Peudo-body

Not tested

Without pseudo-footer, the peudo-body is composed with rows selected with tbody tr:first-child ~ tr (all sibling rows), or with tbody tr :not(:first-child).

With a pseudo-footer, the peudo-body is composed with rows selected with tbody tr:not(:first-child):not(:last-child).

本文标签： javascriptIs it valid to use more than one thead or tfoot element in a tableStack Overflow