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