Asignando Estilos CSS a las Celdas

A continuación os muestro cómo queda la hoja de estilos estilo2.css tras completar la definición del ancho de algunas celdas:

table.ancho99 {width:99%;}

td.a1{background-color:white; width:150px;}
td.a2{background-color:white;}

td.b1{background-color:#OEBEBA; width:150px;}
td.b2{background-color:#OEBEBA;}
td.b3{background-color:#OEBEBA; width:50px;}

td.c1{background-color:#9ED7D7; width:150px;}
td.c2{background-color:#F6DA98;}

td.d1{background-color:#OEBEBA; width:50px;}
td.d2{background-color:#OEBEBA;}
td.d3{background-color:#OEBEBA; width:50px;}

td.e1{background-color:white; width:150px;}
td.e2{background-color:white;}
td.e3{background-color:white; width:150px;}

Bueno, pues antes de seguir añadiendo más propiedades vamos a volver a la páginaplantilla1.htm para completar unas cosillas y ver que tal funcionan estas definiciones y cómo ponerlas en marcha.

En primer lugar guardamos y cerramos la hoja de estilo estilo2.css y abrimos la página plantilla1.htm con el dreamweaver.

Por si las moscas, os indico que tal había quedado el código Html de esa plantilla:

<html>
  <head>
    <title>Titulo de tu pagina : PONER SECCION</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
    <link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css">
  </head>
  <body bgcolor="#FFFFFF">
    <table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
      <tr>
        <td>Logotipo</td>
        <td>Banner</td>
      </tr>
    </table>
    <table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
      <tr>
        <td>titulo</td>
        <td>ruta</td>
        <td>flechas</td>
      </tr>
    </table>
    <table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
      <tr>
        <td>menu</td>
        <td>contenido</td>
      </tr>
    </table>
    <table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
      <tr>
        <td>contador</td>
        <td>opciones</td>
        <td>flechas</td>
      </tr>
    </table>
    <table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
      <tr>
        <td>fecha</td>
        <td>hueco</td>
        <td>firma</td>
      </tr>
    </table>
  </body>
</html>

Como podréis comprobar si hacéis vista previa de esa página ni los colores ni los anchos son tal y como hemos definido en la hoja de estilos. Por qué crees que puede ser?

Pues porque no hemos indicado en la página qué estilo debe seguir cada celda. Hemos definido los estilos pero aún no los hemos aplicado a nada.

Ahora vamos a aprender a asignar un estilo definido a un elemento de una página.

Para hacer esto solo necesitamos echar un vistazo al código Html de la página plantilla1.htm.

Para hacer que una determinada celda siga un determinado estilo reformamos el código para quede, en lugar de así:

<td>Logotipo</td>

de esta otra forma:

<td class="a1">Logotipo</td>

Lo que hemos hecho es especificar que esa celda es del tipo a1 y por tanto, seguirá las propiedades definidas en la hoja de estilo, según el estilo de td.a1.

Para eso, se ha incluido el comando class que indica la clase de estilo a seguir y se ha elegido la clase ( ="a1").

Lo mismo haremos con todas las demás celdas. Nos será facil identifiarlas en el código Html pues antes habiamos escrito una palabra representativa en cada una de ellas.

Así, por ejemplo, en el código correspondiente a la celda a2 pondremos esto:

<td class="a2">banner</td>

y así con todas las demás.

El código de la página plantilla1.htm queda así entonces:

<html>
  <head>
    <title>Titulo de tu pagina : PONER SECCION</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
    <link href="estilo2.css" media="screen" rel="StyleSheet" type="text/css">
  </head>
  <body bgcolor="#FFFFFF">
    <table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
      <tr>
        <td class="a1">Logotipo</td>
        <td class="a2">Banner</td>
      </tr>
    </table>
    <table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
      <tr>
        <td class="b1">titulo</td>
        <td class="b2">ruta</td>
        <td class="b3">flechas</td>
      </tr>
    </table>
    <table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
      <tr>
        <td class="c1">menu</td>
        <td class="c2">contenido</td>
      </tr>
    </table>
    <table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
      <tr>
        <td class="d1">contador</td>
        <td class="d2">opciones</td>
        <td class="d3">flechas</td>
      </tr>
    </table>
    <table width="99%" border="0px" cellspacing="0px" cellpadding="0px">
      <tr>
        <td class="e1">fecha</td>
        <td class="e2">hueco</td>
        <td class="e3">firma</td>
      </tr>
    </table>
  </body>
</html>