Definir el color de fondo de las celdas

Bien, supongamos que me han gustado los siguientes colores con estos códigos:

  • blanco: white
  • Verde Claro: #9ED7D7
  • Verde Oscurillo: #0EBEBA
  • Amarillento: #F6DA98

(o si os habéis conformado con los colores básicos red, yellow, etc....)

Para definir que una celda b1 tenga el color de fondo por ejemplo verde oscuro cuyo código es #OEBEBA tenemos que poner en la hoja de estilos estilo2.css lo siguiente:

td.b1 { background-color: #OEBEBA ; }

Como sabéis, td indica columna, .b1 es el nombre que le damos a cierta celda, background-color indica que vamos a definir el color de fondo y #OEBEBA es el código del color verde oscuro.

De la misma forma definimos el resto de las celdas, de modo que quedaría así.

table.ancho99 {width:99% ;}

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

td.b1 {background-color:#0EBEBA;}
td.b2 {background-color:#0EBEBA;}
td.b3 {background-color:#0EBEBA;}

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

td.d1 {background-color:#0EBEBA;}
td.d2 {background-color:#0EBEBA;}
td.d3 {background-color:#0EBEBA;}

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

Todo esto puede simplificarse bastante reuniendo todas las celdas a las que vamos a dar las mismas propiedades, es decir, el mismo color de fondo.

Por ejemplo, si las celdas td.b1 td.b2 y td.b3 van a tener el mismo color de fondo, #OEBEBA, podemos simplificar las tres líneas de este modo:

td.b1, td.b2, td.b3 { background-color: #0EBEBA ; }

es decir, las ponemos todas seguidas y separadas por una coma "," y a continuación ponemos la propiedad o propiedades entre corchetes una sola vez. De este modo ahorramos espacio, aunque por ahora no lo vamos a hacer, pues como seguramente definiremos más propiedades además del color de fondo, quizás no nos interese hacerlo.

Bien, dicho esto, ya tenemos definidos los colores de fondo de todas las celdas de la plantilla. Ahora vamos a definir la anchura.