Color de una fila HTML

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.

Crear una tabla HTML

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:

<table>
  <thead>
    <tr>
      <th>País</th>
      <th>Capital</th>
      <th>Superficie</th>
      <th>Habitantes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>España</td>
      <td>Madrid</td>
      <td>504.645 km<sup>2</sup></td>
      <td>46,6 M</td>
    </tr>
  </tbody>
</table>

Añadir estilos CSS

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.

tr {
  background-color: black;
  color: white;
}

El color de fondo se puede manipular mediante el atributo background-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.

Dar color a una fila específica

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:

tr:nth-child(3) {
  background-color: black;
  color: white;
}

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