| 2002 a 2006 |
Ángel
R. Puente Pérez |
 |
 |
 |
13.4.- Tablas con celdas de distinto tamaño.
Es bastante habitual tener que diseñar este tipo de tablas: Una celda puede ocupar dos columnas, tres,... o dos filas, tres,...
Supongamos que tenemos que diseñar una tabla como ésta:
Para no liarse, lo primero que hay que tener claro es el número máximo de columnas y filas que tiene la tabla: En este caso es 4 columnas y 3 filas. Pues bien, tendremos que establecer 4 celdas en cada una de las 3 filas. Luego, agruparemos celdas con las etiquetas correspondientes.
Empezamos con la primera fila. Se extiende ocupando las 4 columnas. La etiqueta que debemos emplear es un atributo para la primera celda de la primera fila (debe "extenderse" sobre las cuatro columnas) <td colspan="4">. Lógicamente la primera fila ya se ha acabado.
Pasamos a la segunda fila. La primera celda se extiende sobre 2 filas. Escribiremos <td rowspan="2">. Después de esta celda siguen las otras tres que son normales.
Por último definimos la tercera fila. Como la primera celda ya ha sido definida en la fila anterior, sólo nos queda la segunda celda, que es normal, y la tercera que se extiende sobre dos columnas <td colspan="2">
Pondremos un para meter algo aunque no se vea y, para asegurarnos de la simetría de la tabla, estableceremos el ancho con el atributo width en la tabla (30% por ejemplo) y una proporción del espacio total de la tabla en cada columna (25%) y lo haremos en las celdas que nos parezca (en las "normales" de ancho).
El código podría quedar así:
<html>
<head>
<title>
Tablas 5
</title>
</head>
<body>
<table border align="center" width="30%"
bgcolor="#ffcccc">
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td rowspan="2" width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
</tr>
</table>
</body>
</html>
|
Disponemos de una etiqueta para poner el título de la tabal. Es <caption> con su correspondiente de cierre. Se coloca después de la etiqueta de definición de la tabla y añade un texto por encima de la tabla y centrado con ésta.
<html>
<head>
<title>
Tablas 6
</title>
</head>
<body>
<table border align="center" width="30%"
bgcolor="#ffcccc">
<caption>Éste es el título de la tabla</caption>
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td rowspan="2" width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
</tr>
</table>
</body>
</html>
|
Disponemos de una etiqueta especial para aquellas celdas que son cabecera respecto de las celdas situadas debajo de ellas. Son las etiquetas <TH> (table header). El texto situado en ellas queda centrado y en negrita. Lo único que hay que hacer es sustituir la etiqueta normal de celda por esta otra.
<html>
<head>
<title>
Tablas 7
</title>
</head>
<body>
<table border align="center" width="50%"
bgcolor="#ffcccc">
<caption>Ejemplo de celdas de cabecera</caption>
<tr>
<th>Nombre</th>
<th>Apellido 1</th>
<th>Apellido 2</th>
</tr>
<tr>
<td width="25%">José</td>
<td width="25%">Pérez</td>
<td width="25%">Pérez</td>
</tr>
<tr>
<td>Luis</td>
<td>Román</td>
<td>Sánchez</td>
</tr>
</table>
</body>
</html>
|
|
|
|
| 2002 a 2006 |
Ángel
R. Puente Pérez |
