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

Definiendo color de fondo en 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, de color 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.99 {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.