Estoy tratando de dar el efecto de encabezados generales en esta tabla y luego subdividir dicho encabezado en tres categorías. La tabla debe continuar con estas subdivisiones hasta el final. Veo que probablemente pueda insertar una tabla dentro de una inserción de fila, pero no quiero saturarme con tablas. ¿Hay alguna manera de obtener este efecto de una manera más simple?¿Cómo puedo visualizar las filas dentro de las filas en la tabla?
Puede utilizar el atributos colspan y rowspan para ajustar la distancia en cada célula va a través de filas y columnas.
Por ejemplo:
<table>
<tbody>
<tr>
<td rowspan="2">Top Left Header</td>
<td colspan="3">Call Standard</td>
</tr>
<tr>
<td>Flagged</td>
<td>Percent</td>
<td>Days</td>
</tr>
</tbody>
</table>
Tenga en cuenta que la tabla termina con 4 columnas. La primera fila define una columna que cruza 2 filas, y una columna que cruza 3 columnas.
La segunda fila simplemente completa las columnas "faltantes"; ignorando el primero porque fue definido previamente.
Colspan, Rowspan, o Table-Nesting *.
* table-nesting es detestable, pero a veces es más fácil trabajar con series complicadas de colspans y rowspans.
Gracias por el enlace Jonathan! –
¿Qué le parece usar el "colspan" como se define en el HTML standard? Lo aplicaría a la celda llamada "estándar de llamada" y definiría que debería abarcar más de 3 celdas.
No tiene que tener otra tabla interna ... puede tener la fila corta como una fila de tabla completa, y tener celdas de encabezado que no subdividen rowspan para abarcarla (y en consecuencia usar colspan en la parte superior y debajo de las celdas).
Puede utilizar rowspan y colspan para lograrlo:
<table>
<tr>
<td rowspan="2">Column 1 Heading</td>
<td colspan="3">Call Standard</td>
<td rowspan="2">Column 3 Heading</td>
</tr>
<tr>
<td>Flagged</td>
<td>Percent</td>
<td>Days</td>
</tr>
<tr>
<td>Column 1 Value</td>
<td>4</td>
<td>1%</td>
<td>6</td>
<td>Column 3 Value</td>
</tr>
</table>
que funcionaba, y todavía puede rellenar de forma recursiva para los datos dinámicos. Gracias. –