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

81

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 .

javascript html AlbertEngelB
quelle
1
Sie können definitiv mehrere Körper haben, ich müsste die Spezifikation überprüfen, um über den Kopf zu sehen.
Kevin B
2
@ KevinB: IIRC höchstens ein Kopf und ein Fuß: w3.org/TR/html-markup/table.html#table
Zeta
1
@unor Meine Frage hat mit mehreren <thead>und <tfooter>Elementen zu tun , nicht <tbody>. Sie sind nicht gleich und werden durch separate Regeln diktiert.
AlbertEngelB
@ Dropped.on.Caprica: Ah richtig, ich habe vermisst, dass du auch mehrere thead Elemente haben wolltest . Ich habe die Abstimmung zurückgezogen.
Unor

Antworten:

120

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.

Jon
quelle
Und Sie können th scope=rowgroupinnerhalb eines regulären verwenden tr, um jeden zu beschreiben tbody. Siehe "Beispiel" .
CletusW
11

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.

Zeta
quelle
5
"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." - Ich denke, dass es manchmal wünschenswert wäre, denselben Header in einer sehr langen Tabelle zu wiederholen, damit der Benutzer Sie müssen nicht nach oben scrollen, um sich an die Spalten zu erinnern. Natürlich gibt es dafür andere Lösungen (z. B. JavaScript, um einen "klebrigen" Tabellenkopf oder CSS für Tabellenzeilenelemente zu verwenden, um ihn optisch von den anderen Zeilen zu unterscheiden).
Mike
5

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.

Justin
quelle
3
Es ist überhaupt nichts Falsches daran, mehr als eine zu haben <tbody>, aber gemäß der Spezifikation kann es nur eine <thead>und eine geben <tfoot>.
Pointy
Soweit ich das beurteilen kann, schlug er nicht vor, es überhaupt zu tun. Nur sagen, dass es im Browser funktioniert hat?
AlbertEngelB
@Sebas Der erste Satz macht bekannt, dass Sie mehr als on hinzufügen können, genau wie die ID, aber Sie sollten nicht.
Justin
@Sebas Besser? Manchmal ist das, was in meinem Kopf ist, klarer als das, was ich niedergelegt habe: S
Justin
Nein, ich entschuldige mich total, der Fehler war mein. Prost!
Sebas