Línea de Código
Aprende a Programar

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.

Publicaciones relacionadas:

Tablas estilo cebra con CSS Alinear texto en una tabla Ancho de columnas en tabla Alto y ancho de una tabla en HTML Espaciar bordes de una tabla con CSS