Listas de fácil lectura con un color alternativo y el efecto mouseover

En este artículo veremos cómo crear listas simples que sean fáciles de leer para el usuario.
Para ello vamos a utilizar dos medidas sencillas:

• alternando los colores de las diferentes filas de la lista;
• Resaltar la fila seleccionada en mouseover.

Vamos a hacer un ejemplo y dijo que podíamos mostrar al usuario una lista de productos disponibles en nuestro sitio de comercio electrónico. Por debajo del resultado que vamos a lograr:

Como es evidente el uso de colores alternados para las diferentes líneas fácil de leer los distintos epígrafes de la lista, mientras que el marcador en presencia del ratón hace que sea aún más inmediata y cercana a la línea de asunto de nuestro interés.

Para hacer que nuestra lista, hemos utilizado una simple tabla HTML, algunas instrucciones y un poco de CSS DHTML para tonificar. Pero vamos a grados.

Vamos a empezar con la CSS y ver a continuación el contenido de nuestra hoja de estilo:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco ª







 {



  



 fondo: # 808080;



  



 color: # FFFFFF;



  



 font-weight: bold;







 }







 table.tbElenco td







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 fondo: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 fondo: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 fondo: # FFFF00;







 }

Lo que hicimos es muy simple: primero estilizada de la tabla mediante la asignación de una clase como un todo ("tbElenco '), entonces estilizada y <td> <th> su totalidad, entonces hemos creado tres clases diferentes, correspondientes a los tres el estado de nuestras líneas diferentes: normal, suplentes y puso de relieve.

Vamos a seguir el código de nuestra mesa:

 <table cellspacing="0" cellpadding="2" class="tbElenco">







 <tr>







 <th> producto </ th>







 Cantidad <th> </ th>







 <th> Precio </ th>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> Cámara </ td>







 <td> 3 </ td>







 <td> 100,00 Euro </ td>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> Mobile </ td>







 <td> 2 </ td>







 <td> 150,00 Euro </ td>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> de 20 pulgadas LCD TV </ td>







 <td> 1 </ td>







 <td> 220,00 Euro </ td>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> MP3 Player </ td>







 <td> 1 </ td>







 <td> 60,00 Euro </ td>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> DVD </ td>







 <td> 1 </ td>







 <td> 80.00 Euro </ td>







 </ TR>







 <tr class="alternata" onmouseover="this.className='evidenziata'" onmouseout="this.className='alternata'">







 <td> Consola de juegos </ td>







 <td> 1 </ td>







 <td> 200,00 Euro </ td>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 <td> GPS Navigator </ td>







 <td> 7 </ td>







 <td> 140,00 Euro </ td>







 </ TR>







 <tr class="normale" onmouseover="this.className='evidenziata'" onmouseout="this.className='normale'">







 Mini-DVD Camcorder <td> </ td>







 <td> 1 </ td>







 <td> 270,00 Euro </ td>







 </ TR>







 </ Table>

Como se puede ver es una tabla HTML trivial, en el que se hizo cargo para asignar a las diferentes líneas (<tr>) clases "normales" y "AC".

Para estimular la aparición de la fila en la línea de ratones que asociamos los eventos de elemento (<tr>) onmouseover y onmouseout que proporcionan, respectivamente, la asignación dinámica de 'resaltar' la clase cuando se pasa y el retorno a clases empezar cuando el ratón sale de la fila.