Welcome to www.paezypaezrepresentaciones.com   Click to listen highlighted text! Welcome to www.paezypaezrepresentaciones.com Powered By GSpeech

Tabla y combinación de celdas.

Tabla y combinación de celdas.

En algunas situaciones se necesita que una celda ocupe el lugar de dos o más celdas en forma horizonzal o vertical, para estos casos el elemento td o th dispone de dos propiedades llamadas rowspan y colspan.

A estas propiedades se les asigna un valor entero a partir de 2.

Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad rowspan con el valor 3:

<td colspan="3">Facturación de los últimos tres 

meses</td>

Si por el contrario queremos que una celda se extienda a nivel de filas luego hacemos:

<td rowspan="3">Secciones</td>

Veamos un ejemplo empleando el concepto de combinación de celdas:

<html>

<head>

</head>

<body>

<table border="1">

<tr>

<th rowspan="4">Recursos</th><th colspan="4">Facturación 

de los últimos tres meses</th>

</tr>

<tr>

<td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td>

</tr>

<tr>

<td>CPU</td><td>73000</td><td>67300</td><td>51000</td>

</tr>

<tr>

<td>Monitores</td><td>53000</td><td>72000</td><td>88000</td>

</tr>

</table>

</body>

</html>

Veamos como definimos la primer fila de la tabla:

<tr>

<th rowspan="4">Recursos</th><th colspan="4">Facturación 

de los últimos tres meses</th>

</tr>

Como podemos observar la primer celda la expandimos hacia abajo 4 casilla y la segunda celda la expandimos hacia la derecha en 4 celdas.

Cuando tenemos que disponer las celdas de la segunda fila debemos tener en cuenta que la primera está ocupada. Luego el código es:

<tr>

<td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td>

</tr>

Don't have an account yet? Register Now!

Sign in to your account

Click to listen highlighted text! Powered By GSpeech