total - th html

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

Question

¿Podemos tener varias etiquetas <tbody> en la misma <table> ? En caso afirmativo, ¿en qué escenarios deberíamos usar varias etiquetas <tbody> ?

Answer 1

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

Answer 2

El problema de Martin Joiner se debe a una mala interpretación de la etiqueta <caption> .

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

La etiqueta <caption> debe ser el primer elemento secundario de la etiqueta <table> .

Puede especificar solo un título por tabla.

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

La forma correcta de escribir una tabla de varios cuerpos con varios encabezados sería algo así:

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

Answer 3

He creado un JSFiddle donde tengo dos repeticiones ng anidadas con tablas y la repetición ng principal en tbody. Si inspecciona alguna fila en la tabla, verá que hay seis elementos tbody, es decir, el nivel primario.

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 obtener datos y reemplazarlos, es decir, agregarlos al DOM al hacer clic en padre y eliminar cuando se hace clic en otro o el mismo padre. de nuevo. Para obtener el tipo de comportamiento que encuentra en Prisjakt.nu , si se desplaza a las computadoras de la lista 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 nuevamente en el padre u otro).

Answer 4

Sí, puedes usarlos, por ejemplo, los uso para diseñar grupos de datos con mayor facilidad, 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>

Entonces puedes estilizarlos fácilmente, así:

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

Puedes ver un ejemplo aquí , solo funcionará en navegadores más nuevos ... pero eso es lo que estoy admitiendo 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 hacer los datos 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í.

Answer 5

Sí. De la DTD

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

Así que espera uno o más. Luego continúa diciendo

Use varias secciones de cuerpo cuando se necesitan rules entre grupos de filas de tablas.

Answer 6

Sí. 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 mediante la manipulación de tbodies sin procesar muchas filas individualmente.

Answer 7

Según este ejemplo se puede hacer: w3-struct-tables .

Answer 8

EDITAR: La etiqueta de caption pertenece a la tabla y, por lo tanto, solo debe existir una vez. No asocie un caption con cada elemento del tbody 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>

MAL EJEMPLO ANTERIOR: NO COPIAR

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

Busqué los estándares de W3C en la etiqueta de caption pero no pude encontrar una regla explícita que indique que solo debe haber un elemento de caption por tabla, pero de hecho ese es el caso.