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.

Países Europeos

España

Madrid

Francia

París

Reino Unido

Londres

Países Americanos

EEUU

Washington

Canadá

Toronto

México

México

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

MANUAL DE HTML

Entra en la Red

OTROS MANUALES DE HTML

Entra en la Red

¡Ayúdanos! Pon un enlace en tu página.

Copia y pega estos códigos en tu web.