Unir celdas en tablas HTML

Para conseguir distribuciones especiales e irregulares se puden usar tablas, uniendo varias celdas en una, y dejando otras separadas. Para ello debes utilizar dos atributos dentro del código HTML de la tabla: “colspan” y “rowspan”. Para ello recordamos que TR nos indica el incio de una línea, y TD el inicio de una celda. El atributo Colspan es el que hace que la celda se expanda hacia la derecha para ocupar el espacio de varias celdas de la misma fila. Con “rowspan” la fusión de celdas se produce en vertical. Veamos varios ejemplos de código con una tabla sencilla de cuatro columnas y cuatro celdas.

Partimos del siguiente código HTML para una tabla 4x4, con bordes sencillos pero visible, aunque debes tener en cuenta que muchas veces lo que nos puede convenir es que los bordes no tengan valor border para que así no sean visibles y distribuir el texto y las imágenes dentro de un espacio. Una idea interesante es que tu mismo pruebes esto en un post de Blogger.

<table border="1"> <tbody>

<tr> <td> Texto 1 </td> <td> Texto 2 </td> <td> Texto 3 </td> <td> Texto 4 </td> </tr>

<tr> <td> Texto 1 </td> <td> Texto 2 </td> <td> Texto 3 </td> <td> Texto 4 </td> </tr>
<tr> <td> Texto 1 </td> <td> Texto 2 </td> <td> Texto 3 </td> <td> Texto 4 </td> </tr>
<tr> <td> Texto 1 </td> <td> Texto 2 </td> <td> Texto 3 </td> <td> Texto 4 </td> </tr>

</tbody> </table>

Texto 1	Texto 2	Texto 3	Texto 4
Texto 1	Texto 2	Texto 3	Texto 4
Texto 1	Texto 2	Texto 3	Texto 4
Texto 1	Texto 2	Texto 3	Texto 4

Aplicamos el codigo colspan en la primera de las celdas de cada fila, con valores 1, 2, 3 y 4. Y además quitamos algunas celdas a su derecha, que sobran porque la primera ocupa el espacio de 2, 3 ó 4 casillas. De esta forma la tabla quedaría así.

Texto 1	Texto 2	Texto 3	Texto 4
Texto 1		Texto 3	Texto 4
Texto 1			Texto 4
Texto 1

Y este sería su código.

<table border="1"><tbody>
<tr> <td colspan="1">Texto 1 </td> <td>Texto 2 </td> <td>Texto 3 </td> <td>Texto 4 </td> </tr>
<tr> <td colspan="2">Texto 1 </td> <td>Texto 3 </td> <td>Texto 4 </td> </tr>
<tr> <td colspan="3">Texto 1 </td> <td>Texto 4 </td> </tr>
<tr> <td colspan="4">Texto 1 </td> </tr>
</tbody> </table>

Cuidado con eliminar las celdas que sobran, porque si no lo haces el resultado sería este:

Texto 1	Texto 2	Texto 3	Texto 4
Texto 1		Texto 2	Texto 3	Texto 4
Texto 1			Texto 2	Texto 3	Texto 4
Texto 1				Texto 2	Texto 3	Texto 4

Vemaos ahora el funcionamiento del atributo rowspan, que crea celdas con doble altura, triple, quadruple... Y atención porque de nuevo hemos de eliminar las celdas que antes estaban en el espacio que ahora va a ocupar. En el caso de no hacerlo la celda se desplazará a la derecha dentro de su línea, y no hacia abajo.

Texto 1	Texto 2	Texto 3	Texto 4
Texto 1
Texto 1	Texto 2
Texto 1	Texto 2	Texto 3

Y este sería su código en HTML:

<table border="1"><tbody>
<tr> <td rowspan="1">Texto 1 </td> <td rowspan="2">Texto 2 </td> <td rowspan="3">Texto 3 </td> <td rowspan="4">Texto 4 </td> </tr>
<tr> <td>Texto 1 </td> </tr>
<tr> <td>Texto 1 </td> <td>Texto 2 </td> </tr>
<tr> <td>Texto 1 </td> <td>Texto 2 </td> <td>Texto 3 </td>  </tr>
</tbody> </table>

En cambio si no borramos las celdas, quedaría así.

Texto 1	Texto 2	Texto 3	Texto 4
Texto 1				Texto 2	Texto 3	Texto 4
Texto 1	Texto 2			Texto 3	Texto 4
Texto 1	Texto 2	Texto 3		Texto 4

Con estos ejemplos y un poco de práctica debería dominar estas dos etiquetas "colspan" y "rowspan", para crear tablas en HTML a tu medida. Hace unos años el dominio de las tablas era esencial para el diseño de las páginas Web, y aún tienen un papel importante, pero ahora los espacios se distribuyen también gracias a los estilos CSS. Si quieres para terminar el post i comprobar que has entendido los conceptos, trata de crear la siguiente tabla, partiendo del modelo de 4 filas por 4 columnas que aquí hemos dado. Ten en cuenta que hay una casilla que se expande tanto en la vertical, como en la horizontal.

Texto 1	Texto 2	Texto 3	Texto 4
Texto 1			Texto 4
			Texto 4
Texto 1	Texto 2