| Prefacio | L1 | L2 | L3 | L4 | L5 | L6 | L7 | L8 | Apéndices |
5.2 Tablas Anidadas
El control del posicionamiento exacto de los elementos que componen una página web muchas veces se facilita si se usan tablas anidadas, es decir: tablas insertadas en las celdas de otra. En esos casos se crea primero la tabla exterior, y posteriormente se crean las tablas que se incluyen dentro de la primera. Este procedimiento ayuda muchas veces a evitar las dificultades que surgen por el efecto que tiene el cambio de las dimensiones de una celda en las otras con que comparte fila o columna.
En el epígrafe 5.1 se ilustró el uso de las tablas para configurar una página web mostrando la página acerca del Arte Medieval de la Pinacoteca Virtual de la PUCMM. En realidad esta página es un tanto más compleja.
Como se puede apreciar, a la izquierda de la página aparece una lista de links y en el resto todos los demás elementos. Para facilitar la composición en esta página se utilizaron dos tablas: una exterior y la otra interior.
El código fuente de la página exterior
|
<html>
<head> <title>Arte Medieval</title> </head>
<body>
<table border="0" width="100%" height="100%" cellspacing="0"> <tr> <td width="20%" valign="top" bgcolor="#E6DAAC"> <td width="80%" valign="top" bgcolor="#EBE2BE" ></td> </tr>
</table>
</body>
</html> |
crea el "contenedor"
La celda de la izquierda será utilizada para insertar la lista de ligadura, y en la celda de la derecha se insertará la tabla interior.
El código fuente que genera la tabla interior
|
<table border="0" width="100%" height="100%" bgcolor="#EBE2BE"> <tr> <td width="100%" height="1" colspan="3"></td> </tr> <tr> <td width="20%" height="1"></td> <td width="25%" height="1"></td> <td width="28%" height="1"></td> </tr> <tr> <td width="20%" height="1"></td> <td width="25%" height="1"></td> <td width="28%" height="1" ></td> </tr> <tr> <td width="20%" height="1"></td> <td width="25%" height="1"></td> <td width="28%" height="1"></td> </tr> <tr> <td width="20%" height="27"></td> <td width="25%" height="27" ></td> <td width="28%" height="27"></td> </tr> <tr> <td width="20%" height="27"></td> <td width="25%" height="27"></td> <td width="28%" height="27"></td> </tr>
</table> |
produce la salida
En la figura de arriba hemos reducido proporcionalmente las dimensiones de la tabla para poderla mostrar en esta página sin dificultades, y destacamos con líneas discontinuas el entramado de la tabla, aunque en el navegador estas líneas no aparecen debido a que le asignamos valor cero a la propiedad BORDER.
Para insertar la tabla interior en la exterior, simplemente se toma su código fuente y se coloca entre los tags <TD> y </TD> correspondientes a la tabla exterior.
|
<html>
<head> <title>Arte Medieval</title> </head>
<body>
<table border="0" width="100%" height="100%" cellspacing="0"> <tr> <td width="20%" valign="top" bgcolor="#E6DAAC"> <td width="80%" valign="top" bgcolor="#EBE2BE" ><table border="0" width="100%" height="100%" bgcolor="#EBE2BE"> <tr> <td width="100%" height="1" colspan="3"></td> </tr> <tr> <td width="20%" height="1"></td> <td width="25%" height="1"></td> <td width="28%" height="1"></td> </tr> <tr> <td width="20%" height="1"></td> <td width="25%" height="1"></td> <td width="28%" height="1" ></td> </tr> <tr> <td width="20%" height="1"></td> <td width="25%" height="1"></td> <td width="28%" height="1"></td> </tr> <tr> <td width="20%" height="27"></td> <td width="25%" height="27" ></td> <td width="28%" height="27"></td> </tr> <tr> <td width="20%" height="27"></td> <td width="25%" height="27"></td> <td width="28%" height="27"></td> </tr>
</table>
</td> </tr>
</table>
</body>
</html> |
En la figura de arriba destacamos en rojo los códigos de la tabla interior y en azul los códigos de la tabla exterior.
Una vez que se ha creado el entramado, los elementos de la página se insertan y alinean en las correspondientes celdas utilizando los códigos ya conocidos.
| Lección 5 | 5.1 | 5.2 | 5.3 | 5.4 |
