¿Podemos tener varios <tbody> en la misma <table>?
¿ Podemos tener varias <tbody>
etiquetas en la misma <table>
? En caso afirmativo, ¿en qué escenarios deberíamos utilizar varias <tbody>
etiquetas?
Sí, puedes usarlos, por ejemplo, yo los uso para diseñar grupos de datos más fácilmente, 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 admito 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 que los datos sean mucho más legibles. . Por supuesto, hay otros usos, pero en cuanto a ejemplos aplicables, este es el más común para mí.
Sí. De la DTD
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
Entonces espera uno o más. Luego continúa diciendo
Utilice varias secciones de tbody cuando se necesiten reglas entre grupos de filas de la tabla.
Según este ejemplo de la especificación, se puede hacer: w3-struct-tables .
Las filas de la mesa se pueden agrupar en una cabecera de mesa, un pie de mesa y una o más secciones del cuerpo de la mesa, utilizando los elementos THEAD, TFOOT y TBODY, respectivamente.