Color de una celda en HTML

09/Jun/2015 CSS 5 Comentarios
Programación CSS

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.

Vídeos sobre CSS


5 comentarios en “Color de una celda en HTML”

Víctor Cuervo

muriello

●SIENTES QUE TU PAREJA TE ENGAÑA ?
●TIENES MALA SUERTE EN EL AMOR Y EN TU VIDA?
● QUIERES QUE ESA PERSONA NUNCA SE VALLA DE TU VIDA ?
● NESECITAS ABUNDANCIA EN DINERO Y AMOR?
● SI TU VIDA ESTA ESTANCADA ES MOMENTO DE COMENZAR EL CAMBIO AHORA .
yo necesito que los puntos sean de un color, ejemplo puntos rojos y letra blanca como hago ?

Víctor Cuervo

zuzuertoz

Esto te enseña a aplicar un color a la celda en un archivo CSS, no en el html

Víctor Cuervo

Pepe

El problema viene cuando no se logra rellenar por completo las celdas.. Como se hace para rellenar por completo ?

Víctor Cuervo

dimitryo

No estaria mal poner almenos un ejemplo solo lo dejo como sujerencia :/
perdon por las faltas ortograficas :)

Víctor Cuervo

anastacia

pon el ejemplo puto

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.