Agrupar filas en una tabla html

05/Jun/2015 HTML , 3 Comentarios

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ísDatosT1T2T3T4
EspañaCantidad101589
Porcentaje40%25%32%38%
ItaliaCantidad1281520
Porcentaje10%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.

Vídeos sobre HTML


3 comentarios en “Agrupar filas en una tabla html”

Víctor Cuervo

fernando carvajal

Buen dia como esta muy buena la información, tengo una consulta. Como seria la formula para que los porcentajes aumenten y suban cada vez que hayan nuevos datos de las ganancias de mis empleados mensualmente

Víctor Cuervo

Emanuel Lagomarsino

Gracias por la información. Una consulta, ¿cómo se destacaría la línea de las agrupaciones? (es decir, en tu ejemplo que se marcara la línea entre España e Italia)

Saludos

Víctor Cuervo

Víctor Cuervo

Buenas,

Para eso tendrías que utilizar CSS y dar una clase en concreto. Por ejemplo podrías poner a las filas esas:

<tr class="divisor">
  <td rowspan="2">España</td>
  <td>Cantidad</td>
  <td>10</td>
  <td>15</td>
  <td>8</td>
  <td>9</td>
</tr>

Y luego dar el estilo a la clase «divisor»:

 table, th, td {
   border: 1px solid white;
 }
 
 table {
 	border-collapse: collapse;
 }

 .divisor {
   border-top:3pt solid red;
  }

Espero que esto te ayude.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.