Agrupar filas en una tabla html

05/Jun/2015 HTML , 2 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:

  1. <td rowspan="2">España</td>
  2. <td>Cantidad</td>
  3. <td>10</td>
  4. <td>15</td>
  5. <td>8</td>
  6. <td>9</td>
  7. </tr>

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.

  1. <td>Porcentaje</td>
  2. <td>40%</td>
  3. <td>25%</td>
  4. <td>32%</td>
  5. <td>38%</td>
  6. </tr>

De esta forma hemos visto como el atributo rowspan nos ayuda a agrupar filas en una tabla HTML.

Vídeos sobre HTML


2 comentarios en “Agrupar filas en una tabla html”

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

*

*