Pouvons-nous avoir plusieurs <tbody> dans la même <table>?

Pouvons-nous avoir plusieurs <tbody>balises en même temps <table>? Si oui, dans quels scénarios devrions-nous utiliser plusieurs <tbody>balises?

Oui, vous pouvez les utiliser, par exemple je les utilise pour styliser plus facilement des groupes de données, comme ceci:

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>

Vous pouvez voir un exemple ici . Cela ne fonctionnera que dans les nouveaux navigateurs, mais c'est ce que je soutiens dans mon application actuelle, vous pouvez utiliser le regroupement pour JavaScript, etc. L'essentiel est que c'est un moyen pratique de grouper visuellement les lignes pour rendre les données beaucoup plus lisibles . Il y a bien sûr d'autres utilisations, mais en ce qui concerne les exemples applicables, celui-ci est le plus courant pour moi.

Oui. De la DTD

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

Il attend donc un ou plusieurs. Il poursuit en disant

Utilisez plusieurs sections tbody lorsque des règles sont nécessaires entre des groupes de lignes de table.

Selon cet exemple, cela peut être fait: w3-struct-tables .

Le problème de Martin Joiner est dû à une mauvaise compréhension de la <caption>balise.

La <caption>balise définit une légende de table.

La <caption>balise doit être le premier enfant de la <table>balise.

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

Notez également que l' scopeattribut doit être placé sur un <th>élément et non sur un <tr>élément.

La bonne façon d'écrire une table multi-en-tête multi-corps 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>

Oui. Je les utilise pour masquer / révéler dynamiquement la partie pertinente d'une table, 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 tout ou simplement le jour en cours en manipulant les corps sans traiter plusieurs lignes individuellement.

EDIT: la captionbalise appartient à la table et ne doit donc exister qu'une seule fois. N'associez pas un captionà chaque tbodyélément comme je l'ai fait:

<table>
    <caption>First Half of Table (British Dinner)</caption>
    <tbody>
        <tr><th>1</th><td>Fish</td></tr>
        <tr><th>2</th><td>Chips</td></tr>
        <tr><th>3</th><td>Pease</td></tr>
        <tr><th>4</th><td>Gravy</td></tr>
    </tbody>
    <caption>Second Half of Table (Italian Dinner)</caption>
    <tbody>
        <tr><th>5</th><td>Pizza</td></tr>
        <tr><th>6</th><td>Salad</td></tr>
        <tr><th>7</th><td>Oil</td></tr>
        <tr><th>8</th><td>Bread</td></tr>
    </tbody>
</table>

MAUVAIS EXEMPLE CI-DESSUS: NE PAS COPIER

L'exemple ci-dessus ne s'affiche pas comme prévu car l'écriture comme celle-ci indique une mauvaise compréhension de la captionbalise. Vous auriez besoin de beaucoup de hacks CSS pour le rendre correctement car vous iriez à l'encontre des normes.

J'ai cherché les normes W3C sur la captionbalise mais je n'ai pas pu trouver de règle explicite qui stipule qu'il ne doit y avoir qu'un seul captionélément par table mais c'est en fait le cas.

De plus, si vous exécutez un document HTML avec plusieurs <tbody>balises via le validateur HTML du W3C , avec un DOCTYPE HTML5, il sera validé avec succès.

J'ai créé un JSFiddle où j'ai deux ng-répétitions imbriquées avec des tables et le parent ng-repeat sur tbody. Si vous inspectez une ligne du tableau, vous verrez qu'il y a six éléments tbody, c'est-à-dire le niveau parent.

HTML

<div>
        <table class="table table-hover table-condensed table-striped">
            <thead>
                <tr>
                    <th>Store ID</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>Cost</th>
                    <th>Sales</th>
                    <th>Revenue</th>
                    <th>Employees</th>
                    <th>Employees H-sum</th>
                </tr>
            </thead>
            <tbody data-ng-repeat="storedata in storeDataModel.storedata">
                <tr id="storedata.store.storeId" class="clickableRow" title="Click to toggle collapse/expand day summaries for this store." data-ng-click="selectTableRow($index, storedata.store.storeId)">
                    <td>{{storedata.store.storeId}}</td>
                    <td>{{storedata.store.storeName}}</td>
                    <td>{{storedata.store.storeAddress}}</td>
                    <td>{{storedata.store.storeCity}}</td>
                    <td>{{storedata.data.costTotal}}</td>
                    <td>{{storedata.data.salesTotal}}</td>
                    <td>{{storedata.data.revenueTotal}}</td>
                    <td>{{storedata.data.averageEmployees}}</td>
                    <td>{{storedata.data.averageEmployeesHours}}</td>
                </tr>
                <tr data-ng-show="dayDataCollapse[$index]">
                    <td colspan="2">&nbsp;</td>
                    <td colspan="7">
                        <div>
                            <div class="pull-right">
                                <table class="table table-hover table-condensed table-striped">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Date [YYYY-MM-dd]</th>
                                            <th>Cost</th>
                                            <th>Sales</th>
                                            <th>Revenue</th>
                                            <th>Employees</th>
                                            <th>Employees H-sum</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr data-ng-repeat="dayData in storeDataModel.storedata[$index].data.dayData">
                                            <td class="pullright">
                                                <button type="btn btn-small" title="Click to show transactions for this specific day..." data-ng-click=""><i class="icon-list"></i>
                                                </button>
                                            </td>
                                            <td>{{dayData.date}}</td>
                                            <td>{{dayData.cost}}</td>
                                            <td>{{dayData.sales}}</td>
                                            <td>{{dayData.revenue}}</td>
                                            <td>{{dayData.employees}}</td>
                                            <td>{{dayData.employeesHoursSum}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

(Note latérale: cela remplit le DOM si vous avez beaucoup de données aux deux niveaux, donc je travaille donc sur une directive pour récupérer les données et les remplacer, c'est-à-dire ajouter dans DOM lorsque vous cliquez sur parent et supprimer lorsqu'un autre est cliqué ou même parent Pour obtenir le type de comportement que vous trouvez sur Prisjakt.nu , si vous faites défiler les ordinateurs répertoriés et cliquez sur la ligne (pas les liens). Si vous faites cela et inspectez les éléments, vous verrez qu'un tr est ajouté et puis supprimé si le parent est cliqué à nouveau ou un autre.)