web-dev-qa-db-fra.com

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

Peut-on avoir plusieurs balises <tbody> dans le même <table>? Si oui, dans quels scénarios devrions-nous utiliser plusieurs balises <tbody>?

htmlhtml-tablexhtml
577
Jitendra Vyas

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 navigateurs les plus récents, mais c'est ce que je soutiens dans mon application actuelle. Vous pouvez utiliser le regroupement pour JavaScript, etc. . 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.

691
Nick Craver

Oui. De la DTD

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

Donc, il en attend un ou plus. Il continue ensuite à dire

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

297
Martin Smith

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

47
Kris van der Mast

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

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

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

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

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

La bonne façon d'écrire une table multi-en-têtes multi-en-têtes serait la suivante:

<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>
13
John Slegers

Oui. Je les utilise pour masquer/révéler de manière dynamique 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 tout ou seulement le jour actuel en manipulant des corps sans traiter plusieurs lignes individuellement.

7
CPslashM

EDIT: la balise caption appartient à la table et ne devrait donc exister qu’une seule fois. Ne pas associer une caption à chaque élément tbody 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 correctement, car une telle écriture indique une incompréhension de la balise caption. Vous auriez besoin de beaucoup de piratages CSS pour le rendre correctement car vous iriez à l'encontre des normes.

J'ai recherché les normes W3C sur la balise caption mais je n'ai pas trouvé de règle explicite stipulant qu'il ne doit y avoir qu'un seul élément caption par table, mais c'est en fait le cas.

4
Martin Joiner

En outre, si vous exécutez un document HTML avec plusieurs balises <tbody> par validateur HTML du W3C , avec un DOCTYPE HTML5, la validation aboutira.

3
Bern

J'ai créé un JSFiddle où j'ai deux répétitions ng 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>

(Remarque: cela remplit le DOM si vous avez beaucoup de données sur les deux niveaux. Je travaille donc sur une directive pour extraire des données et les remplacer, c.-à-d. Pour obtenir le type de comportement que vous trouvez sur Prisjakt.n , si vous faites défiler l'écran jusqu'aux ordinateurs énumérés et cliquez sur la ligne (pas les liens). Si vous le faites et inspectez les éléments, voir qu’un tr est ajouté puis supprimé si un clic est fait sur le parent ou un autre.)

2
Pixic