Tablas HTML: fusión de celdas con atributos 'colspan' y 'rowspan'

A veces necesitamos fusionar celdas de una tabla para representar determinados datos, para ello se emplean los siguientes atributos dentro de las etiquetas td (o th si se da el caso):

• colspan es para fusionar celdas de una misma fila, o sea, fusiona columnas, a colspan se le pueden asignar valores ="2", ="3", ="4"... dependiendo del número de celdas que queramos fusionar:
  <table class="tabla_bordes" summary="fusión de celdas: uso de 'colspan'">
  <caption>fusión de celdas: uso de 'colspan'</caption>
  
  <tr> <td> celda 1,1 </td> <td> celda 1,2 </td> <td> celda 1,3 </td> <td> celda 1,4 </td> </tr>
  
  <tr> <td> celda 2,1 </td> <td colspan="2"> celda 2,2 y 2,3 fusionadas </td> <td> celda 2,4 </td> </tr>
  
  <tr> <td> celda 3,1 </td> <td> celda 3,2 </td> <td> celda 3,3 </td> <td> celda 3,4 </td> </tr>
  
  </table>

  El código anterior genera una tabla que fusiona las celdas 2,2 y 2,3:

  fusión de celdas: uso de 'colspan'

  celda 1,1	celda 1,2	celda 1,3	celda 1,4
  celda 2,1	celda 2,2 y 2,3 fusionadas		celda 2,4
  celda 3,1	celda 3,2	celda 3,3	celda 3,4

• rowspan es para fusionar celdas de las filas de una misma columna, e igual que antes a colspan se le asignan valores ="2", ="3", ="4"... dependiendo del número de celdas que queramos fusionar:
  <table class="tabla_bordes" summary="fusión de celdas: uso de 'rowspan'">
  <caption>fusión de celdas: uso de 'rowspan'</caption>
  
  <tr> <td> celda 1,1 </td> <td> celda 1,2 </td> <td> celda 1,3 </td> <td> celda 1,4 </td> </tr>
  
  <tr> <td> celda 2,1 </td> <td colspan="2"> celda 2,2 y 3,2 fusionadas </td> <td> celda 2,3 </td> <td> celda 2,4 </td> </tr>
  
  <tr> <td> celda 3,1 </td> <td> celda 3,3 </td> <td> celda 3,4 </td> </tr>
  
  </table>

  El código anterior genera una tabla que fusiona las celdas 2,2 y 3,2:

  fusión de celdas: uso de 'rowspan'

  celda 1,1	celda 1,2	celda 1,3	celda 1,4
  celda 2,1	celda 2,2 y 3,2 fusionadas	celda 2,3	celda 2,4
  celda 3,1		celda 3,3	celda 3,4

  En el código de este último ejemplo, al definir las celdas de la tercera fila nos saltamos la celda 3,2, que está fusionada con la celda 2,2 de la segunda fila, y pasamos de la celda 3,1 a la celda 3,3

Ahora vamos a fusionar cuatro celdas, dos de la segunda fila con otras dos de la tercera:

<table class="tabla_bordes" summary="fusión de celdas: uso de 'colspan' y 'rowspan'">
<caption>fusión de celdas: uso de 'colspan' y 'rowspan'</caption>

<tr> <td> celda 1,1 </td> <td> celda 1,2 </td> <td> celda 1,3 </td> <td> celda 1,4 </td> </tr>

<tr> <td> celda 2,1 </td> <td rowspan="2" colspan="2"> celdas 2,2, 2,3, 3,2 y 3,3 fusionadas </td> <td> celda 2,4 </td> </tr>

<tr> <td> celda 3,1 </td> <td> <td> celda 3,4 </td> </tr>

</table>

El código anterior genera una tabla que fusiona las celdas 2,2 y 3,2:

fusión de celdas: uso de 'colspan' y 'rowspan'

celda 1,1	celda 1,2	celda 1,3	celda 1,4
celda 2,1	celdas 2,2, 2,3, 3,2 y 3,3 fusionadas		celda 2,4
celda 3,1			celda 3,4

---

Otros ejemplos de fusión de celdas:

Ejemplos de fusión de celdas

Fusión de filas A B C	Fusión de filas A B C D E F G H I J K
Fusión de columnas A B C	Fusión de columnas A B C D E F G H I J