Unidad 6. Tablas (IV)



6.4. Unir celdas con colspan y rowspan

Con los atributos colspan y rowspan podemos unir o fusionar celdas adyacentes, asi 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

Enero-2019 (V 2.0)
Pág. 6.4
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.