Cuando estemos diseñando una tabla puede darse el caso de que queramos que una celda agrupe al contenido de dos celdas del resto de fila. Es por ello que vamos a ver como podemos agrupar filas en una tabla HTML.
Para entender mejor de lo que hablamos vamos a ver cómo quedaría visualmente:
País | Datos | T1 | T2 | T3 | T4 |
---|---|---|---|---|---|
España | Cantidad | 10 | 15 | 8 | 9 |
Porcentaje | 40% | 25% | 32% | 38% | |
Italia | Cantidad | 12 | 8 | 15 | 20 |
Porcentaje | 10% | 9% | 45% | 80% |
Podemos ver que el contenido del País agrupa al contenido que tiene la cantidad y el porcentaje. Es decir se agrupa la primera celda con las dos filas siguientes.
Para agrupar filas en una tabla html vamos a utilizar el atributo rowspan de las celdas. El atributo rowspan indica el número de filas a las cual se expande su contenido.
El valor del atributo rowspan equivaldrá al número de filas sobre las que queramos expander dicha celda.
De esta forma la primera fila de datos de la tabla quedaría de la siguiente forma:
España
Cantidad
10
15
8
9
Vemos que hemos indicado que la primera celda se expanderá a dos filas. De esta forma, a la hora de crear la segunda fila, esta tendrá una celda menos que la primera (en vez de 6 celdas se tendrán 5 celdas), ya que hemos dicho que la primera celda equivale a dos.
Porcentaje
40%
25%
32%
38%
De esta forma hemos visto como el atributo rowspan nos ayuda a agrupar filas en una tabla HTML.