Question Pouvons-nous avoir plusieurs dans la même ?

Pouvons-nous avoir plusieurs <tbody> tags dans le même <table>? Si oui, alors dans quels scénarios devrions-nous utiliser plusieurs <tbody> Mots clés?


538
2018-06-19 18:25


origine


Réponses:


Oui vous pouvez les utiliser, par exemple je les utilise pour plus facilement mettre en forme des groupes 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 les styler 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 supporte dans mon application actuelle, vous pouvez utiliser le groupage pour JavaScript, etc. Le plus important est de pouvoir regrouper visuellement les lignes pour faire les données beaucoup plus lisible. Bien sûr, il y a d'autres utilisations, mais pour ce qui est des exemples applicables, celui-ci est le plus courant pour moi.


649
2018-06-19 18:45



Oui. De la DTD

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

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

Utiliser plusieurs sections de corps lorsque règles   sont nécessaires entre les groupes de table   lignes


280
2018-06-19 18:29



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


42
2018-06-19 18:28



Le problème de Martin Joiner est causé par un malentendu <caption> marque.

le <caption> tag définit une légende de table.

le <caption> tag doit être le premier enfant de la <table> marque.

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

Notez également que scope attribut devrait ê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-t-tête 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>


12
2018-05-31 13:31



Oui. Je les utilise pour cacher / révéler dynamiquement la partie pertinente d'une table, par ex. 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 des corps sans traiter plusieurs lignes individuellement.


7
2018-03-06 13:47



En outre, si vous exécutez un document HTML avec plusieurs <tbody> tags à travers Le validateur HTML du W3C, avec un DOCTYPE HTML5, il sera validé avec succès.


3
2017-08-15 08:18



EDIT: Le caption tag appartient à la table et ne devrait donc exister qu'une seule fois. Ne pas associer un caption avec 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 rend pas ce que vous attendez, car écrire ainsi indique un malentendu caption marque. Vous auriez besoin de beaucoup de hacks CSS pour le rendre correctement parce que vous iriez à l'encontre des standards.

J'ai cherché des standards W3Cs sur le caption tag mais n'a pas pu trouver une règle explicite qui stipule qu'il doit y avoir un seul caption élément par table mais c'est en fait le cas.


3
2018-05-15 14:07



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 quelconque 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 sur les deux niveaux, donc je travaille 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 quand un autre est cliqué ou même parent. Pour obtenir le genre de comportement que vous trouvez sur Prisjakt.nu, si vous faites défiler vers le bas pour les ordinateurs répertoriés et cliquez sur la ligne (pas les liens). Si vous faites cela et que vous inspectez les éléments, vous verrez qu'un tr est ajouté et ensuite supprimé si le parent est cliqué à nouveau ou un autre. )


2
2017-07-31 15:56