Artículos
CSS

Color de una fila HTML

10/Jun/2015

En el ejemplo de hoy vamos a ver como podemos poner color de una fila HTML utilizando hojas de estilo CSS. Lo que haremos será poner color de una fila HTML atendiendo a la posición que ocupa dentro de la tabla.

Para ello lo primero que vamos a crear será una tabla HTML. Hay que recordar que para crear una tabla HTML nos basamos en elementos tr, th y td. En concreto las filas son representadas por el elemento tr.

Veamos como sería un ejemplo de tabla:


...
País Capital Superficie Habitantes
España Madrid 504.645 km2 46,6 M

Ahora lo que vamos es añadir una hoja de estilo CSS. La hoja de estilo va a manipular el elemento tr para poder dar el color a la fila HTML.

table tr {
 ...
}

El color de fondo se puede manipular mediante el atributo backgorund-color y el color del texto mediante el atributo color.

De esta forma si queremos poner una fila de color de fondo negro y de color de texto blanco utilizaremos la siguiente combinación.

table tr {
	color: #fff;
	background-color: #000;
}

Si bien, este código CSS va a dar color a todas las filas de la tabla. Si lo que queremos es dar color a una fila en concreto vamos a utilizar el pseudoelemento nth-child el cual recibe como parámetro el número de fila a la que queremos dar color.

Por ejemplo, si queremos dar color a la tercera fila utilizaremos el siguiente código:

table tr:nth-child(3) {
	color: #fff;
	background-color: #000;
}

Como hemos podido ver, controlando este código CSS hemos podido dar. de forma sencilla, color de una fila HTML.

Código Fuente

Descárgate el código fuente de Color de una fila HTML
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios