Anchura de las Celdas
Para definir la anchura que deseamos que tenga una celda, usaremos el comando "WIDTH". Como ya os he comentado, podemos utilizar distintas unidades, como por ejemplo, centímetros (cm), puntos (pt), porcentajes (%) o pixeles (px) entre otros.
Os recomiendo usar siempre pixeles, pues creo que son las más comodas. Recordad que se indican con las letras "px" después del número.
Imagina que no sabréis cuanto mide un pixel (ni yo mismo lo se, je je) de modo que lo mejor es hacer algunas pruebas hasta que veamos que la anchura es la deseada.
Como aún no sabemos exactamente que anchura queremos darle a cada celda, pondremos un valor aproximado y más tarde, dependiendo del contenido de cada celda, la ajustaremos mejor.
Cuando definimos varias propiedades para el mismo elemento (por ejemplo, color de fondo y anchura en una celda) podemos hacerlo en la misma línea. Para ello basta con insertar el trozo de código correspondiente a la nueva propiedad junto a la propiedad definida antes, pero separandolas una de otra por un punto y coma ";".
De este modo, si ponemos una determinada anchura a una celda de las definidas en el apartado anterior, la hoja de estilo "estilo2.css" quedaría así:
El punto y coma ";" del final (el de antes del corchete final) no es necesario, pero yo suelo incluirlo siempre por si alguna vez incluyo alguna otra propiedad más, no olvidarme de separarla de la anterior.
Como al principio habiamos definido que la anchura de las tablas sería del 99%, solo es necesario definir el ancho de todas las celdas de la tabla menos una. Esa última a la que no definimos la anchura tomará el ancho restante, es decir, el que le permitan las otras celdas a las que si hemos definido el ancho.
Así, por ejemplo, fijaos en esta misma página, la que estáis leyendo. A la izquierda hay un menu que es una celda con un ancho definido en la hoja de estilo. Además, a la derecha de estas líneas, hay otra celda con otro ancho diferente definido. En cambio, la celda en la que están estas palabras, con fondo amarillo, no tiene definido el ancho, de modo que ocupa lo que le dejan las celdas de los lados hasta ocupar todas juntas el 99% de la ventana del navegador.
El caso es que solo vamos a definir el ancho a aquellas celdas que sabemos lo que queremos que ocupen de anchura, el resto las dejaremos sin definir. No se si se entiende bien el proposito, espero que si.
En el ejemplo que estamos haciendo, el la primera tabla con las celdas a1 y a2, solo definiremos la a1, pues en ella vamos a poner un banner de nuestra página que sabremos (cuando lo hagamos, claro) el ancho que va a tener. En cambio, dejaremos que la celda a2 ocupe todo lo que quede hasta completar el 99% de la tabla. En ese espacio podremos poner un banner de publicidad o de intercambio de banners, y nos da más o menos igual lo que ocupe.
En la tabla segunda, que hemos dividido en tres celdas, b1, b2 y b3, solo definiremos las celdas b1 y b3, pues más o menos sabemos y queremos que ocupe un ancho determinado, en cambio dejaremos que la b2 ocupe el resto y por eso no definimos su anchura en la hoja de estilos "estilo2.css".
En la tabla tercera, donde irá el menú lateral y el contenido de las páginas, solo definiremos el ancho de la celda del menú, la c1, y dejaremos que la c2 ocupe el resto, que es donde irán los contenidos de la página.
Asimismo, en la siguiente tabla, solo definimos las celdas d1 y d3 dejando que la d2 tome el resto del ancho hasta el 99%.
Y finalmente en la última tabla solo definimos el ancho en las celdas e1 y e3 dejando libre la central.
Puede sonar un poco rollo todo esto, verdad? Venga, animo que la cosa está saliendo muy bien.
|
Introdución