MundoGeek - Escrito por Juan Gabriel Covas el Martes, 11 de Noviembre de 2008 a las 12:53 pm - Sin comentarios

Iluminar filas de una tabla con CSS

Tags: , , , , ,

La forma más cómoda de iluminar filas completas de una tabla, en HTML y sin recurrir a javascript, es utilizando CSS. Funcionará en Internet Explorer, Firefox, Opera, Safari y Chrome. Además este método nos permite olvidarnos por completo del color original de fondo que tenía la fila, y que con otros métodos es necesario tener en cuenta para restaurarlo, etc.

Debemos introducir el siguiente código CSS en el apartado <style> del html (observar que el color del iluminado será amarillo)

#content table tr:hover {
  background-color: yellow;
}

También debemos declarar el HTML como XHTML y otras zarandajas en lugar de sólo <html> (en la parte superior del archivo html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">

Después, donde queramos introducir la tabla con las filas que se iluminen, precederemos el tag <table> con un <div> que lo identifique como ”content” (ver que es el nombre dado en el trozo de CSS del primer paso). Es decir:

<div id=content>
<table>...nuestras filas...</table>
</div>

Simplemente con esto, deberían iluminarse las filas de la tabla en amarillo al pasar el ratón por encima.

Si no funciona, hay que tener en cuenta que NO podemos asignar color de fondo en cada fila usando la propiedad del estilo background-color (en el tag <tr>). Si queremos asignar colores alternativos a cada fila, o forzar un color de fondo, usaremos la propiedad “bgcolor” dentro de <tr>, pero no como estilo. De esta forma conservaremos el color de fondo original cuando el ratón deje de iluminar la fila.

Así que, por ejemplo, para forzar que no se ilumine la típica fila de cabecera, ya que el <div> engloba a toda la tabla, forzaremos un color de fondo usando en esa fila concreta el estilo background-color dentro de la fila <tr> y de esa forma NO se iluminará.



Hacer un comentario

Debes iniciar sesión para hacer un comentario.

RECOMENDAMOS:

LO MAS RECIENTE

Software - 29 / Mar / 09 - Sin comentarios

PopMonger: Cómo procesar automáticamente los rebotes de correo o “message bounces”

MÁS EN Software


Software

MySQL - 6 / Oct / 09 - Sin comentarios

MySQL: Cómo hacer una copia de seguridad de todas las bases de datos

MÁS EN Servidores


Linux Servidores

MundoGeek - 5 / Oct / 09 - Sin comentarios

De cómo recuperé una cuenta de messenger después del robo de contraseña

MÁS EN MundoGeek


MundoGeek