Listas de fácil leitura, com uma cor alternativa e efeito mouseover

Neste artigo vamos ver como criar listas simples que são facilmente legível para o usuário.
Para fazer isso, vamos utilizar duas medidas simples:

• cores alternadas para as linhas diferentes da lista;
• Destacar a linha selecionada no mouseover.

Vamos fazer um exemplo e dizer que poderíamos mostrar ao usuário uma lista de produtos disponíveis em nosso site de comércio eletrônico. Abaixo do resultado que iremos alcançar:

Como usar o evidente de cores alternadas para as linhas diferentes mais fácil de ler as diversas entradas na lista, enquanto o marcador presença no mouse torna ainda mais imediatamente relevante para a linha de assunto de nosso interesse.

Para tornar a nossa lista, usamos uma tabela HTML simples, algumas instruções e um pouco de CSS DHTML para revigorar-lo. Mas vamos graus.

Vamos começar com o CSS e veja abaixo o conteúdo de nossa folha de estilo:

 table.tbElenco







 {



  



 border: 1px solid # 808080;



  



 font-family: Verdana, Arial, Tahoma;



  



 font-size: 10px;



  



 color: # 000000;







 }







 table.tbElenco ª







 {



  



 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;







 }

O que fizemos é muito simples: primeiro nós estilizados tabela, atribuindo uma classe como um todo ('tbElenco'), então nós estilizados e <td> <th> sua totalidade, então criamos três classes diferentes, correspondentes aos três status de nossas linhas diferentes: normal, alternativo e destaque.

Vamos seguir o código de nossa tabela:

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







 <tr>







 <th> Produto </ th>







 Qtde <th> </ th>







 <th> Preço </ 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> de 20 polegadas 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> Console Jogos </ 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 você pode ver é uma tabela HTML trivial, onde teve o cuidado de atribuir tanto para as diferentes linhas (<tr>) classes 'normal' e 'AC'.

Para estimular o aparecimento da linha do mouse na linha que nós associamos os eventos onmouseover elemento (<tr>) e onmouseout, que prevêem, respectivamente, a atribuição dinâmica de 'destaque' da classe quando você passa o mouse e retornar à classe iniciar quando o mouse sai da linha.