Color de una fila HTML

10/Jun/2015 CSS , ,

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:

  1. <th>País</th>
  2. <th>Capital</th>
  3. <th>Superficie</th>
  4. <th>Habitantes</th>
  5. </tr>
  6. <td>España</td>
  7. <td>Madrid</td>
  8. <td>504.645 km<sup>2</sup></td>
  9. <td>46,6 M</td>
  10. </tr>
  11. ...
  12. </table>

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.

  1. table tr {
  2. ...
  3. }

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.

  1. table tr {
  2. color: #fff;
  3. background-color: #000;
  4. }

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:

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

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

Vídeos sobre CSS