Resaltar filas de tabla con CSS

En este ejemplo vamos a ver cómo al mover el cursor sobre una tabla hagamos el efecto de resaltar filas de tabla con CSS. Es decir, que se ilumine la fila sobre la que esté el cursor, o que cambie de color.

Crear la tabla HTML

Lo primero será generar una tabla en HTML. Así que veamos cómo sería esta 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>

Como siempre hay que ver los elementos HTML que forman la tabla. Esto es importante ya que daremos estilo a estos elementos. Los importantes son table, tr, td, th… En este caso nos vamos a quedar con tr que es el que representa a la fila y nos servirá para el efecto que queremos hacer.

Aplicar estilos CSS

Ya hemos dicho que el efecto de resaltar filas de tabla con CSS lo vamos a ejecutar sobre el elemento tr, así que nuestra hoja de estilos CSS se tendrá que montar de la siguiente forma:

tr {

}

Lo que vamos a hacer es cambiar de color a la fila, así que manipularemos el atributo background-color, asignando un valor diferente al que tengan.

tr {
  background-color: red;
}

Pero hasta ahora este código CSS lo que hace es poner todas las filas de rojo. Y nosotros solo queremos que sea cuando pasemos con el cursor.

Usar el selector hover

En este caso, al estilo hay que decirle que será en el caso de que se ejecute el selector hover. Este es el que representa que el ratón pase por el elemento. Modificamos de nuevo nuestro código para añadir este efecto.

tr:hover {
  background-color: red;
}

Con esto ya tendríamos conseguido el efecto de resaltar filas de tabla con CSS.

Cambiar el cursor

Pero vamos a añadirle un plus más, que será el que cuando pasemos por la fila el cursor se nos transforme en puntero. En este caso deberemos de modificar la propiedad cursor y darle el valor de pointer para conseguir dicho efecto.

De esta manera nuestro código CSS final que consigue el efecto de resaltar filas de tabla con CSS quedaría de la siguiente forma:

tr:hover {
  background-color: red;
  cursor: pointer;
}