Ja, Sie können sie verwenden. Ich verwende sie beispielsweise, um Datengruppen wie folgt einfacher zu formatieren:
thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; }
tbody:nth-child(odd) { background: #f5f5f5; border: solid 1px #ddd; }
tbody:nth-child(even) { background: #e5e5e5; border: solid 1px #ddd; }
<table>
<thead>
<tr><th>Customer</th><th>Order</th><th>Month</th></tr>
</thead>
<tbody>
<tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
</tbody>
</table>
Hier können Sie ein Beispiel anzeigen . Es funktioniert nur in neueren Browsern, aber das unterstütze ich in meiner aktuellen Anwendung. Sie können die Gruppierung für JavaScript usw. verwenden. Hauptsache, es ist eine bequeme Möglichkeit, die Zeilen visuell zu gruppieren, um die Daten besser lesbar zu machen . Es gibt natürlich auch andere Verwendungszwecke, aber soweit zutreffend, ist dieses für mich das häufigste.
tbody
oder mehrere Bildschirmleser zu verwenden ?<tbody>
. Wenn Sie anfangen, Tabellen zu verschachteln , führt dies normalerweise zu echten Navigationsproblemen für einen Bildschirmleser.<tbody>
Elemente beschreiben separate Gruppen in der Tabelle, wie in der Antwort erläutert wurde. Außerdem sollte ich hinzufügen, dass es im Allgemeinen besser ist, Zellen auf Hintergründe auszurichten, daher sollte das CSS beispielsweisetbody:nth-child(odd) td { background: #f5f5f5; }
:nth-child()
Verwendung für die verknüpfte Demonstration, das Multiple<tbody>
funktioniert in jedem Browser.Ja. Aus der DTD
Es werden also eine oder mehrere erwartet. Dann heißt es weiter
quelle
tbody
Elemente sind in Ordnung" bleibt erhalten. Insbesondere können Sie jetzt das einetfoot
Element nach dem anderen setzen,tbody
wenn Sie möchten . (Sie haben den DTD-Aspekt ordentlich umgangen indem sie sagen, dass sie keine zur Verfügung stellen .) :-)<tr>
also könnte es auch Null sein (dh ein tbody oder ein tr bedeutet, dass es nur ein tr und kein tbody sein könnte.)Nach diesem Beispiel ist dies möglich: w3-struct-tables .
quelle
Das Problem von Martin Joiner wird durch ein Missverständnis des
<caption>
Tags verursacht.Das
<caption>
Tag definiert eine Tabellenbeschriftung.Das
<caption>
Tag muss das erste untergeordnete<table>
Element des Tags sein.Sie können nur eine Beschriftung pro Tabelle angeben.
Beachten Sie außerdem, dass das
scope
Attribut auf einem<th>
Element und nicht auf einem<tr>
Element platziert werden sollte.Der richtige Weg, eine Multi-Header-Multi-Tbody-Tabelle zu schreiben, wäre ungefähr so:
quelle
caption
Tag sollte dem öffnendentable
Tag folgen . developer.mozilla.org/en-US/docs/Web/HTML/Element/tablescope="rowgroup"
(anstelle voncol
) dertbody
Header. Siehe Beispiel .Ja. Ich benutze sie, um den relevanten Teil einer Tabelle, z. B. einen Kurs, dynamisch auszublenden / aufzudecken. Nämlich.
Es kann eine Schaltfläche bereitgestellt werden, mit der Sie zwischen allen oder nur dem aktuellen Tag wechseln können, indem Sie tbodies bearbeiten, ohne viele Zeilen einzeln zu verarbeiten.
quelle
BEARBEITEN: Das
caption
Tag gehört zur Tabelle und sollte daher nur einmal existieren. Ordnen Sie nichtcaption
jedemtbody
Element ein zu, wie ich es getan habe:SCHLECHTES BEISPIEL OBEN: NICHT KOPIEREN
Das obige Beispiel wird nicht wie erwartet gerendert, da ein solches Schreiben auf ein Missverständnis des
caption
Tags hinweist . Sie würden viele CSS-Hacks benötigen, um es korrekt zu rendern, da Sie gegen Standards verstoßen würden.Ich habe nach W3Cs-Standards für das
caption
Tag gesucht , konnte jedoch keine explizite Regel finden, die besagt, dass es nur eincaption
Element pro Tabelle geben muss, aber das ist tatsächlich der Fall.quelle
Wenn Sie ein HTML-Dokument mit mehreren
<tbody>
Tags über den HTML-Validator von W3C mit einem HTML5-DOCTYPE ausführen, wird es außerdem erfolgreich validiert.quelle
Ich habe eine JSFiddle erstellt, in der ich zwei verschachtelte ng-Wiederholungen mit Tabellen und die übergeordnete ng-Wiederholung für tbody habe. Wenn Sie eine Zeile in der Tabelle untersuchen, sehen Sie, dass es sechs tbody-Elemente gibt, dh die übergeordnete Ebene.
HTML
(Randnotiz: Dies füllt das DOM aus, wenn Sie viele Daten auf beiden Ebenen haben. Daher arbeite ich an einer Anweisung zum Abrufen und Ersetzen von Daten, dh Hinzufügen zu DOM beim Klicken auf übergeordnetes Element und Entfernen, wenn auf ein anderes oder dasselbe übergeordnete Element geklickt wird Um das Verhalten zu erhalten, das Sie auf Prisjakt.nu finden , scrollen Sie zu den aufgelisteten Computern und klicken Sie auf die Zeile (nicht auf die Links). Wenn Sie dies tun und Elemente überprüfen, sehen Sie, dass ein tr hinzugefügt wird und dann entfernt, wenn das übergeordnete Element erneut angeklickt wird.)
quelle