Resaltar filas de tabla con CSS

13/Jun/2015 CSS , 3 Comentarios

En este ejemplo vamos a ver como 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.

Lo primer será generar una tabla en HTML. Así que veamos como sería esta 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>

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.

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:

  1. table tr {
  2. /* Estilos */
  3. }

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.

  1. table tr {
  2. background-color: #f00;
  3. }

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. 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.

  1. table tr:hover {
  2. background-color: #f00;
  3. }

Con esto ya tendríamos conseguido el efecto de resaltar filas de tabla con CSS. 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:

  1. table tr:hover {
  2. background-color: #f00;
  3. cursor: pointer;
  4. }

Vídeos sobre CSS


3 comentarios en “Resaltar filas de tabla con CSS”

Víctor Cuervo

Santiago

Una consulta, y si yo quiero que al darle click a esa fila quede marcada con un colo como se haria?

Víctor Cuervo

carmelo palomeque

Muy didáctico y buenísimo, saludos

Víctor Cuervo

Víctor Cuervo

Carmelo, me alegra mucho que te haya servido y sobre todo que sea didáctico. Que es lo que más buscamos.
Muchas gracias.

¿Algo que nos quieras comentar?

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

*

*