Können wir mehrere <tbody> in derselben <table> haben?

Question

Können wir mehrere <tbody> Tags in derselben <table> ? Wenn ja, in welchen Szenarien sollten wir mehrere <tbody> Tags?

Answer 1

Ja, man kann sie verwenden. Ich verwende sie zum Beispiel, um Datengruppen einfacher zu gestalten, etwa so:

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>

Ein Beispiel können Sie hier sehen . Es wird nur in neueren Browsern funktionieren, aber das ist es, was ich in meiner aktuellen Anwendung unterstütze, Sie können die Gruppierung für JavaScript usw. verwenden. Die Hauptsache ist, dass es eine bequeme Möglichkeit ist, die Zeilen visuell zu gruppieren, um die Daten viel besser lesbar zu machen. Es gibt natürlich noch andere Verwendungszwecke, aber was die anwendbaren Beispiele angeht, so ist dies für mich der häufigste.

Answer 2

Ja. Von die DTD

<!ELEMENT table
     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

Sie erwartet also einen oder mehrere. Dann heißt es weiter

Verwenden Sie mehrere tbody-Abschnitte, wenn Regeln zwischen Tabellengruppen erforderlich sind Zeilen.

Answer 3

Diesem Beispiel aus der Spezifikation zufolge ist dies möglich: w3-struktur-tabellen .

Tabellenzeilen können in einen Tabellenkopf, einen Tabellenfuß und einen oder mehrere Tabellenkörperabschnitte unter Verwendung der Elemente THEAD, TFOOT und TBODY gruppiert werden.

Answer 4

Das Problem von Martin Joiner ist auf ein Missverständnis der <caption> Tag.

El <caption> Tag definiert eine Tabellenüberschrift.

El <caption> Tag muss das erste Kind des <table> Tag.

Sie können nur eine Beschriftung pro Tabelle angeben.

Beachten Sie auch, dass die scope Attribut sollte in einer <th> Element und nicht auf einem <tr> Element.

Die richtige Art und Weise, eine Tabelle mit mehreren Überschriften und mehreren Zeilen zu schreiben, wäre etwa so:

<table id="dinner_table">
    <caption>This is the only correct place to put a caption.</caption>
    <tbody>
        <tr class="header">
            <th colspan="2" scope="col">First Half of Table (British Dinner)</th>
        </tr>
        <tr>
            <th scope="row">1</th>
            <td>Fish</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Chips</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Peas</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Gravy</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="header">
            <th colspan="2" scope="col">Second Half of Table (Italian Dinner)</th>
        </tr>
        <tr>
            <th scope="row">5</th>
            <td>Pizza</td>
        </tr>
        <tr>
            <th scope="row">6</th>
            <td>Salad</td>
        </tr>
        <tr>
            <th scope="row">7</th>
            <td>Oil</td>
        </tr>
        <tr>
            <th scope="row">8</th>
            <td>Bread</td>
        </tr>
    </tbody>
</table>

Answer 5

Ja. Ich verwende sie, um den relevanten Teil einer Tabelle, z. B. einen Kurs, dynamisch ein- und auszublenden. Viz.

<table>
  <tbody id="day1" style="display:none">
    <tr><td>session1</td><tr>
    <tr><td>session2</td><tr>
  </tbody>
  <tbody id="day2">
    <tr><td>session3</td><tr>
    <tr><td>session4</td><tr>
  </tbody>
  <tbody id="day3" style="display:none">
    <tr><td>session5</td><tr>
    <tr><td>session6</td><tr>
  </tbody>
</table>

Es kann eine Schaltfläche vorgesehen werden, mit der man zwischen allem oder nur dem aktuellen Tag hin- und herschalten kann, indem man tbodies manipuliert, ohne viele Zeilen einzeln zu bearbeiten.