Lists easy to read with an alternate color and mouseover effect

In this article we will see how to create simple lists that are easily readable for the user.
To do this we will use two simple measures:

• alternating colors for different rows of the list;
• Highlight the selected row on mouseover.

Let's make an example and say we could show the user a list of products available in our e-commerce site. Below the result that we will achieve:

As is evident the use of alternating colors for different lines easier to read the various entries in the list, while the presence highlighter on mouse makes it even more immediately relevant to the subject line of our interest.

To make our list, we used a simple HTML table, a few instructions and a bit of CSS DHTML to invigorate it. But let's degrees.

Let's start with the CSS and see below the content of our style sheet:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco th







 {



  



 background: # 808080;



  



 color: # FFFFFF;



  



 font-weight: bold;







 }







 table.tbElenco td







 {



  



 border-bottom: 1px solid # CCCCCC;







 }







 table.tbElenco tr.normale







 {



  



 background: # FFFFFF;







 }







 table.tbElenco tr.alternata







 {



  



 background: # EEEEEE;







 }







 table.tbElenco tr.evidenziata







 {



  



 background: # FFFF00;







 }

What we did is very simple: first we stylized the table by assigning a class as a whole ('tbElenco'), then we stylized and <td> <th> its entirety, then we have created three different classes corresponding to the three Status of our different lines: normal, alternate and highlighted.

Let's follow the code of our table:

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







 <tr>







 <th> Product </ th>







 <th> Qty </ th>







 <th> Price </ th>







 </ Tr>







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







 <td> Camera </ 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> 20-inch 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 player </ td>







 <td> 1 </ td>







 <td> 80.00 Euro </ td>







 </ Tr>







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







 <td> Console Games </ 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>

As you can see it is a trivial HTML table, where we took care to assign either to the different lines (<tr>) classes 'normal' and 'AC'.

To stimulate the appearance of the row on mouse line we associate the element (<tr>) onmouseover and onmouseout events which provide respectively the dynamic assignment of the class 'highlight' when you hover and return to class start when the mouse leaves the row.