En este ejemplo vamos a ver cómo podemos especificar el color de una celda en HTML. Para ello os vamos a apoyar en el lenguaje de estilos CSS.
Lo primero que tenemos que saber para especificar el color de una celda en HTML es como se construye una tabla. Una tabla se construye a partir de tres elementos básicos: table, tr y td. El elemento table representa a la tabla, el elemento tr representa a una fila o conjunto de celdas, las cuales serán representadas mediante el elemento td.
Por ejemplo una tabla en HTML sería de la siguiente forma:
| España | Madrid | 504.645 km2 | 46,6 M |
Así que para poder especificar el color de una celda en HTML deberemos de trabajar con el elemento td y sus estilos asociados. En este caso vamos a trabajar con la propiedad background-color que es la que nos permite especificar el color de fondo de un elemento.
De esta forma al especificar el estilo background-color podríamos escribir lo siguiente:
table td {
background-color: #f00;
}Si bien lo que vamos a conseguir es que todas las celdas tengan un color de fondo azul.
En el caso de que queramos especificar el color de una celda en HTML, pero que esta celda sea concreta es recomendable que utilicemos las clases. Es decir, vamos a definir unas clases en CSS las cuales se las vamos a asociar a las celdas.
Por ejemplo podemos crear tres clases de importancia:
table .alto {
background-color:red;
}
table .medio {
background-color:yellow;
}
table .bajo {
background-color:green;
}A la hora de escribir los selectores vemos que les hemos anticipado el elemento table para que estas clases solo puedan establecerse dentro de una tabla.
Los nombres de las clases en CSS siempre van a empezar por un punto (.)
Ahora lo que hacemos es utilizar el atributo class del elemento td que representa a las celdas para asignarles un valor u otro.
Celda Así nuestra tabla podría quedar de la siguiente forma:
| País | Capital | Superficie | Habitantes |
|---|---|---|---|
| España | Madrid | 504.645 km2 | 46,6 M |
| Italia | Roma | 301.338 km2 | 60,7 M |
| Francia | París | 675.417 km2 | 66 M |
Vemos como hemos utilizado diferentes clases en diferentes elementos td para poder definir el color de una celda en HTML.
