Página Anticuada. Visita la nueva versión.

Aplicando Estilos a las Tablas

Hay que ver como sois. Hemos definido antes un estilo para las tablas, para que ocupen un 99% del ancho, y se me ha olvidado usarlo. Y vosotros no me avisais!! Hay que estar más atentos!! je je je je.

Vamos pues a decirle a las tablas que deben seguir el estilo definido antes en la hoja de estilo. Os acordais? Ese que definimos así:

table.99 {width:99%}

en la hoja de estilo "estilo2.css".

Al principio, al crear las tablas escogimos, junto con el tamaño de borde cero y esas cosas, que el ancho fuera 99%, os acordais? Pues el Dreamweaver incluyó un trozo de código en nuestras tablas para cumplir eso. El código era este:

<table width="99%" border="0px" cellspacing="0px" cellpadding="0px">

Pero resulta que nosotros no vamos a querer que el ancho esté definido en el código HTML de la plantilla sino solo en la hoja de estilo, de modo que vamos a ver el código HTML de la plantilla y borraremos el trozo de código este width="99%". Ese trozo borrado (acordaos de borrarlo en las cinco tablas que tenemos) no nos hace falta, pues la anchura la tenemos definida en la Hoja de Estilos. El código queda entonces así:

<table border="0px" cellspacing="0px" cellpadding="0px">

Ahora acudimos de nuevo a ver el código HTML de la plantilla y añadir en las líneas:

<table......

lo siguiente:

class="99"

quedando la cosa así (para cada una de las cinco tablas):

<table class="99" border="0px" cellspacing="0px" cellpadding="0px">

y listo, con solo eso, todas las tablas ocuparán ahora el 99% del ancho de la ventana del navegador.

Si queréis hacer una prueba de que tal funciona esto, haced lo siguiente:

- Guardad la plantilla.

- Abrid la hoja de estilos y en lugar de 99% poden 50%.

- Guardad la hoja de estilos.

- Abrid la plantilla y veréis como ha cambiado el ancho con solo retocar un numerito.

Parece una tonteria porque el ejemplo es tonto, pero imaginad la cantidad de cosas que se pueden variar en segundos con solo un par de clics, verdad?

Bueno, pues ahora volved a poner el 99% en la hoja de estilos y seguimos con el tema.

Acordaos de poner lo de <table class="99"......> en las cinco tablas.