Unidad 6. Tablas (IV)

6.4. Unir celdas con colspan y rowspan

Con los atributos colspan y rowspan podemos unir o fusionar celdas adyacentes, así obtendremos celdas de mayor tamaño, el resultado siempre será un rectángulo. Es decir, no podríamos unir las celdas formando una "L" o una "U".

El atributo colspan extiende la celda tantas celdas a la derecha como le indiquemos, contando la celda actual. Por ejemplo colspan="2" ocupa su celda y una más a la derecha. Veamos este código aplicado a una tabla:

<table border="1">
 <tr>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="2">Celda cs2</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="3">Celda cs3</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="4">Celda cs4</td>
 </tr>
</table>

Produce este resultado:

Celda	Celda	Celda	Celda
Celda cs2		Celda	Celda
Celda cs3			Celda
Celda cs4

Observa que al expandir la celda, en la fila ponemos menos etiquetas <td>.

El atributo rowspan expande la celda tantas celdas hacia abajo como le indiquemos, contando la celda actual.

<table border="1">
 <tr>
  <td>Celda</td>
  <td rowspan="2">Celda rs2</td>
  <td rowspan="3">Celda rs3</td>
  <td rowspan="4">Celda rs3</td>
 </tr>
 <tr>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
</table>

Celda	Celda rs2	Celda rs3	Celda rs3
Celda
Celda	Celda
Celda	Celda	Celda

Observa que al aplicar rowspan a una celda, "cogemos" una celda de la siguiente fila, por lo que la siguiente celda tendrá una celda menos.

Y en cualquier caso podemos combinar estos dos atributos en la misma celda:

<table border="1">
 <tr>
  <td colspan="2" rowspan="2">Celda cs2 rs2</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
</table>

Produce este resultado

Celda cs2 rs2		Celda
		Celda
Celda	Celda	Celda