Images Agosto-2/2016

Tutorial HTML: 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 colsan=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á el 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	Paris
	Reino Unido	Londres
Países Americanos	EEUU	Washington
	Canada	Toronto
	Mexico	Mexico

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>Paris</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>Canada</p></td>
<td><p>Toronto</p></td>
</tr>
<tr>
<td><p>Mexico</p></td>
<td><p>Mexico</p></td>
</tr>
</table>

http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp