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.
