Manual de HTML con videos y códigos de ejemplo

HTML - Tablas avanzadas

Tablas con Colspan y Rowspan

Es la forma de fusionar celdas en una tabla.

rowspan: Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.

colspan: Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.

De esta forma si ponemos <td colspan="2">, quiere decir que la celda actual se extiende en el ancho de dos celdas.

Algo parecido ocurre si ponemos <td rowspan="3">, la celda ocupará en alto de 3 celdas normales.

Veamos un ejemplo:

Si visualizamos esta tabla, podemos observar que la primera celda ocupa tres filas, y no sobrepasa la altura total de las tres celdas que tiene a la derecha.

Código fuente de la tabla:

<table width="80%" border="1" cellspacing="0" cellpadding="0">

<tr>

<td rowspan="3"><p>Países Europeos</p></td>

<td><p>España</p></td>

<td><p>Madrid</p></td>

</tr>

<tr>

<td><p>Francia</p></td>

<td><p>París</p></td>

</tr>

<tr>

<td><p>Reino Unido</p></td>

<td><p>Londres</p></td>

</tr>

<tr>

<td rowspan="3"><p>Países Americanos</p></td>

<td><p>EEUU</p></td>

<td><p>Washington</p></td>

</tr>

<tr>

<td><p>Canadá</p></td>

<td><p>Toronto</p></td>

</tr>

<tr>

<td><p>México</p></td>

<td><p>México</p></td>

</tr>

</table>

¿Necesitas crear un tabla? Prueba nuestra herramienta para crear tablas