| Para las etiquetas <td>
y <th> existen los atributos
colspan y rowspan,
que se utilizan para combinar celdas.
A través del atributo colspan
se especifica el número de columnas por las que se extenderá
la celda, y a través del atributo rowspan
se especifica el número de filas por las que se extenderá
la celda.
Para que quede más claro, vamos
a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla:
| DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE |
| DIFERENCIAS |
PERRO |
HOMBRE |
| PEQUEÑO |
GRANDE |
| Duración crecimiento |
10 meses |
18 a 24 meses |
16 años |
| Tiempo de gestación |
58 a 63 días |
9 meses |
| Duración de vida del pelo/cabello |
1 año |
2 a 7 años |
Habría que escribir el siguiente
código:
<table width="575"
border="2"
cellspacing="2">
<tr align="center"
valign="middle">
<th colspan="4">DIFERENCIAS
ENTRE EL PERRO Y EL HOMBRE</th>
</tr>
<tr align="center"
valign="middle">
<th rowspan="2">DIFERENCIAS</th>
<th colspan="2">PERRO</th>
<th rowspan="2">HOMBRE</th>
</tr>
<tr align="center"
valign="middle">
<th>PEQUEÑO</th>
<th>GRANDE</th>
</tr>
<tr align="center"
valign="middle">
<td>Duración
crecimiento</td>
<td>10
meses</td>
<td>18
a 24 meses</td>
<td>16
años</td>
</tr>
<tr align="center"
valign="middle">
<td>Tiempo
de gestación</td>
<td colspan="2">58
a 63 días</td>
<td>9
meses</td>
</tr>
<tr align="center"
valign="middle">
<td>Duración
de vida del pelo/cabello</td>
<td colspan="2">1
año</td>
<td>2
a 7 años</td>
</tr>
</table>
Vamos a explicar un poco cómo funciona
dicho código, aunque sería conveniente que primero intentaras
entender el código comparándolo con la tabla que de él
se obtiene.
En primer lugar, tenemos que ver el número
máximo de columnas que ha de tener la tabla. En este caso serían
cuatro columnas. Para saber el número de columnas total de la tabla,
tenemos que fijarnos en el número total de celdas que podemos obtener
por fila al trazar las líneas verticales que separan las columnas
entre sí.
En la primera fila, la línea <th
colspan="4">DIFERENCIAS
ENTRE EL PERRO Y EL HOMBRE</th>
indica que la celda ocupará cuatro columnas de la tabla (la columna
actual y las 3 siguientes). Como la tabla tiene como mucho cuatro columnas
y el atributo colspan de la celda vale
cuatro, no hay que definir más celdas para esa misma fila.
En la segunda fila, la línea <th
rowspan="2">DIFERENCIAS</th>
indica que la celda ocupará dos filas de la tabla (la actual y
la siguiente). Lo mismo ocurre con la línea <th
rowspan="2">HOMBRE</th>.
Ya hemos definido dos celdas de la segunda
fila. Sabemos que la tabla tiene como mucho cuatro columnas, por lo que
como en la línea <th colspan="2">PERRO</th>
el atributo colspan vale dos, ya tenemos
las cuatro celdas.
En la segunda fila hemos definido dos
celdas que se expanden por dos filas, por lo que en la tercera fila habrá
que definir solamente dos celdas, y no cuatro, ya que dos de sus celdas
se corresponden con las definidas en la fila anterior.
Las dos nuevas celdas son <th>PEQUEÑO</th>
y <th>GRANDE</th>.
El uso de los atributos colspan
y rowspan puede resultar algo complicado
al principio. Es cuestión de práctica.
|
Para practicar los distintos aspectos explicados en el tema puedes realizar
el 
