Artículos
HTML

Agrupar filas en una tabla html

05/Jun/2015

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.

Código Fuente

Descárgate el código fuente de Agrupar filas en una tabla html
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Test HTML
Suscribir
Notificar de
guest
3 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios