Peut-on avoir plusieurs <tbody> dans le même <table>?

Question

Peut-on avoir plusieurs <tbody> tags en même <table>? Si oui, alors dans quels cas doit-on utiliser plusieurs <tbody> tags?

Answer 1

Oui, vous pouvez utiliser, par exemple-je les utiliser plus facilement les groupes de type de données, comme ceci:

<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>

Ensuite, vous pouvez appliquer un style facilement, comme ceci:

tbody:nth-child(odd) { background: #f5f5f5; }
tbody:nth-child(even) { background: #e5e5e5; }

Vous pouvez voir un exemple ici, ça ne marchera que dans les navigateurs les plus récents...mais c'est ce que je suis à l'appui de ma demande, vous pouvez utiliser le regroupement pour JavaScript, etc. La chose principale est que c'est un moyen pratique de regrouper visuellement les lignes afin de rendre les données beaucoup plus lisible. Il y a d'autres utilisations des cours, mais, le cas échéant, des exemples, celui-ci est la plus courante pour moi.

Answer 2

Oui. À partir de la DTD

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

Donc il s'attend à une ou plusieurs. Il va ensuite à dire

L'utilisation de plusieurs tbody sections lorsque les règles sont nécessaires entre les groupes de la table les lignes.

Answer 3

Selon le présent exemple, il peut être fait: http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3.

Answer 4

Martin Menuisier problème est causé par une mauvaise compréhension de l' <caption> balise.

L' <caption> balise définit une légende du tableau.

L' <caption> balise doit être le premier enfant de l' <table> balise.

Vous ne pouvez spécifier qu'une légende par table.

Notez également que l' scope attribut doit être placé sur un <th> élément, et pas sur un <tr> élément.

La bonne façon d'écrire un multi-en-tête multi-table tbody serait quelque chose comme ceci :

<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

Oui. - Je les utiliser de façon dynamique cacher/révéler la partie pertinente d'un tableau, par exemple un cours. 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>

Un bouton peut être fourni pour basculer entre le tout ou juste le jour actuel en manipulant tbodies sans traitement, le nombre de lignes individuellement.