¿Podemos tener múltiples <tbody> en la misma <table>?

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

Sí, puede usarlos, por ejemplo, los uso para diseñar más fácilmente grupos de datos, como este:

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>

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

Si. De la DTD

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

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

Use múltiples secciones tbody cuando se necesiten reglas entre grupos de filas de tabla.

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

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

La <caption>etiqueta define un título de tabla.

La <caption>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 scopeatributo debe colocarse en un <th>elemento y no en un <tr>elemento.

La forma correcta de escribir una tabla multi-encabezado multi-tbody 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>

Si. Los uso para ocultar / revelar dinámicamente la parte relevante de una tabla, por ejemplo, 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 manipulando los cuerpos sin procesar muchas filas individualmente.

EDITAR: la captionetiqueta pertenece a la tabla y, por lo tanto, solo debe existir una vez. No asocie un captiona cada tbodyelemento como lo hice yo:

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

MALO EJEMPLO ANTERIOR: NO COPIE

El ejemplo anterior no se procesa como cabría esperar porque escribir así indica un malentendido de la captionetiqueta. Necesitaría muchos hacks CSS para que se renderice correctamente porque iría en contra de los estándares.

Busqué los estándares W3Cs en la captionetiqueta, pero no pude encontrar una regla explícita que indique que debe haber solo un captionelemento por tabla, pero ese es el caso.

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

He creado un JSFiddle donde tengo dos ng-repite anidadas con tablas, y el padre ng-repeat en tbody. Si inspecciona cualquier fila de la tabla, verá que hay seis elementos tbody, 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 tanto, estoy trabajando en una directiva para recuperar datos y reemplazarlos, es decir, agregarlos al DOM cuando se hace clic en padre y eliminar cuando se hace clic en otro o en el mismo padre de nuevo. Para obtener el tipo de comportamiento que encuentra 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 en padre nuevamente u otro.)