Pregunta ¿Podemos tener múltiples en la misma ?


Podemos tener múltiples <tbody> etiquetas en el mismo <table>? En caso afirmativo, ¿en qué escenarios debemos usar múltiples <tbody> etiquetas?


538
2018-06-19 18:25


origen


Respuestas:


Sí, puede usarlos, por ejemplo, los uso para dar estilo a grupos de datos más fácilmente, como este:

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

Luego puedes diseñarlos fácilmente, así:

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

Puedes ver un ejemplo aquí, solo funcionará en los navegadores más nuevos ... pero eso es lo que estoy respaldando en mi aplicación actual, puedes usar la agrupación para JavaScript, etc. Lo principal es que es una forma conveniente de agrupar visualmente las filas para crear los datos. mucho más legible Hay otros usos, por supuesto, pero en cuanto a los ejemplos aplicables, este es el más común para mí.


649
2018-06-19 18:45



Sí. De el DTD

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

Entonces espera uno o más. Luego continúa diciendo

Use secciones de tbody múltiples cuando reglas   son necesarios entre grupos de tabla   filas


280
2018-06-19 18:29



De acuerdo con este ejemplo, se puede hacer: w3-struct-tables.


42
2018-06-19 18:28



El problema de Martin Joiner es causado por un malentendido de la <caption> etiqueta.

los <caption> etiqueta define una leyenda de tabla.

los <caption> la etiqueta debe ser el primer hijo de la <table> etiqueta.

Puede especificar solo un título por tabla.

Además, tenga en cuenta que el scope atributo debe colocarse en una <th> elemento y no en un <tr> elemento.

La forma correcta de escribir una tabla multi-tbody multi-header sería algo como esto:

<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



Sí. Los uso para ocultar / revelar dinámicamente la parte relevante de una tabla, p. un curso. Verbigracia.

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

Se puede proporcionar un botón para alternar entre todo o solo el día actual mediante la manipulación de entidades sin procesar muchas filas individualmente.


7
2018-03-06 13:47



Además, si ejecuta un documento HTML con múltiples <tbody> etiquetas a través Validador HTML del W3C, con un DOCTYPE HTML5, validará con éxito.


3
2017-08-15 08:18



EDITAR: El caption la etiqueta pertenece a la tabla y, por lo tanto, solo debería existir una vez. No asocies un caption con cada tbody elemento como lo hice: 

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

MAL EJEMPLO ARRIBA: NO COPIE

El ejemplo anterior no se procesa como es de esperar porque escribir así indica una incomprensión de la caption etiqueta. Necesitarías muchos hacks CSS para que se procesara correctamente porque estarías yendo en contra de los estándares.

Busqué los estándares W3Cs en el caption pero no pudo encontrar una regla explícita que establezca que debe haber solo una caption elemento por tabla, pero ese es, de hecho, el caso.


3
2018-05-15 14:07



He creado un JSFiddle donde tengo dos ng-repeticiones anidadas con tablas, y el padre ng-repeat en tbody. Si inspecciona cualquier fila en la tabla, verá que hay seis elementos de cuerpo, es decir, el nivel principal.

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>

( Nota al margen: Esto llena el DOM si tiene una gran cantidad de datos en ambos niveles, por lo que estoy trabajando en una directiva para recuperar datos y reemplazarlos, es decir, agregar en DOM al hacer clic en parent y eliminar cuando se hace clic en otro o en el mismo padre nuevamente. Para obtener el tipo de comportamiento que encuentras en Prisjakt.nu, si se desplaza hacia abajo a las computadoras enumeradas y hace clic en la fila (no en los enlaces). Si lo hace e inspecciona los elementos, verá que se agrega un tr y luego se elimina si se hace clic de nuevo en el padre u otro. )


2
2017-07-31 15:56