Color de una fila HTML

10/Jun/2015 CSS , , Deja un comentario

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


¿Algo que nos quieras comentar?

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

*

*