Mehrere <thead> / <tbody> in Tabelle gültig?

Stellen Sie sich eine Liste ähnlicher Listen vor:

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

Nun ist die ganze „Tabellen für Daten nicht Design“ Vergessen Argument, wollte ich für eine einzelne Tabelle anzuzeigen listund haben einen separaten <thead>und <tbody>für jeden Eintrag in list.

Ist das technisch gültig? Dies funktioniert im Browser, aber meine Spinnen-Sinne kribbeln in diesem Fall .

Sie können so viele <tbody>Elemente haben, wie Sie möchten, aber nicht mehr als jeweils eines von <thead>und <tfoot>. Referenz :

Inhaltsmodell:

In dieser Reihenfolge: optional ein Beschriftungselement, gefolgt von null oder mehr Colgroup-Elementen, gefolgt von einem Thead-Element, gefolgt von entweder null oder mehr tbody-Elementen oder einem oder mehreren tr-Elementen, optional gefolgt von einem tfoot-Element , optional gemischt mit einem oder mehr skriptunterstützende Elemente.

Es sind höchstens eins theadund eins tfoot erlaubt , daher sollten Sie keine zusätzlichen Header erstellen. Immerhin gibt das thin a theadIhren Spalten eine Bedeutung, wie "Tageszeit", "Temperatur", "Anzahl der derzeit brennenden Katzen".

Wenn die Einträge in Ihrer Liste verwandt sind, sollten sie sich alle in derselben Tabelle befinden, und Sie sollten einen passenden Header bereitstellen, um diese Beziehung anzuzeigen.

Wenn die Einträge tatsächlich nichts miteinander zu tun haben, sollten Sie für jede dieser Einträge eine einzige Tabelle bereitstellen. Sie können immer noch dasselbe CSS auf jede Tabelle anwenden, um ein gutes Ergebnis zu erzielen.

Ich betrachte es als genau wie idAttribute. Sie sollen eindeutig sein, aber Sie können sie tatsächlich auf derselben Seite wiederverwenden und trotzdem auswählen. Das heißt, nur weil es getan werden kann, heißt das nicht, dass es getan werden sollte.

Ich würde dagegen empfehlen.