Anchura de las Celdas
Para definir la anchura que deseamos que tenga una celda, usaremos la palábra mágica 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" justo después del número y recordad también que no conviene dejar espacios en blanco entre la cifra y las letras px.
Imagina que no sabé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 añado 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 hasta completar un ancho del 99% entre todas ellas.
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 anchura a 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. Un poco lio? je je je.
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, ánimo que la cosa está saliendo muy bien.
Lección IV:
