3630 registros
0 hoje
14 nesta semana
4 neste mês|
Ter 02 Dez 2008 10:12 |
|
Página 1 de 3 Este tutorial vai mostrar através de um exemplo bem simples como criar um código jQuery associado a estilos para fazer tabelas listradas, aquelas em que as cores das linhas vão se alternando. Podemos obter o mesmo resultado usando uma porção de métodos. O mais básico de todos é usar atributos das tags do HTML. <html> <title>Página com tabela listrada</title> <head></head> <body> <p>Esta é a tabela feita na unha:</p> <table> <tr bgcolor="#3e83c9"> <th style="color: #ffffff;">Tit 1</th> <th style="color: #ffffff;">Tit 2</th> <th style="color: #ffffff;">Tit 3</th> </tr> <tr> <td style="border-bottom: 1px solid #95bce2;">texto1</td> <td style="border-bottom: 1px solid #95bce2;">texto2</td> <td style="border-bottom: 1px solid #95bce2;">texto3</td> </tr> <tr bgcolor="#ecf6fc"> <td style="border-bottom: 1px solid #95bce2;">texto1</td> <td style="border-bottom: 1px solid #95bce2;">texto2</td> <td style="border-bottom: 1px solid #95bce2;">texto3</td> </tr> <tr> <td style="border-bottom: 1px solid #95bce2;">texto1</td> <td style="border-bottom: 1px solid #95bce2;">texto2</td> <td style="border-bottom: 1px solid #95bce2;">texto3</td> </tr> <tr bgcolor="#ecf6fc"> <td style="border-bottom: 1px solid #95bce2;">texto1</td> <td style="border-bottom: 1px solid #95bce2;">texto2</td> <td style="border-bottom: 1px solid #95bce2;">texto3</td> </tr> <tr> <td style="border-bottom: 1px solid #95bce2;">texto1</td> <td style="border-bottom: 1px solid #95bce2;">texto2</td> <td style="border-bottom: 1px solid #95bce2;">texto3</td> </tr> </table> </body> </html>
A tabela fica como a mostrada ao lado. Até que não está ruim, mas a mão de obra vai ser grande porque, para cada tabela com listras, vamos ter que escrever tudo de novo! Existe uma saída um pouco mais elegante e menos trabalhosa: podemos usar uma folha de estilo onde definimos classes com as características desejadas que depois podem ser aplicadas a determinados elementos do documento. Por exemplo: <html> <title>Página com tabela listrada via CSS</title> <head> <style type="text/css"> .titulo { background-color: bgcolor="#3e83c9"; color: #ffffff; } .linha { border-bottom: 1px solid #95bce2; } .cor { background-color: #ecf6fc; } </style> </head> <body> <p>Mais uma vez, esta é a tabela feita na unha:</p> <table> <tr> <th class="titulo">Tit 1</th> <th class="titulo">Tit 2</th> <th class="titulo">Tit 3</th> </tr> <tr> <td class="linha">texto1</td> <td class="linha">texto2</td> <td class="linha">texto3</td> </tr> <tr class="cor"> <td class="linha">texto1</td> <td class="linha">texto2</td> <td class="linha">texto3</td> </tr> <tr> <td class="linha">texto1</td> <td class="linha">texto2</td> <td class="linha">texto3</td> </tr> <tr class="cor"> <td class="linha">texto1</td> <td class="linha">texto2</td> <td class="linha">texto3</td> </tr> <tr> <td class="linha">texto1</td> <td class="linha">texto2</td> <td class="linha">texto3</td> </tr> </table> </body> </html> Ficou um pouco menos poluído, mas o trabalho ainda é praticamente o mesmo. Será que existe um jeito mais fácil de obter o mesmo resultado? Existe sim! Podemos fazer um javascript que faz o trabalho para nós ou usar um que já esteja pronto, como o script do Matthew Pennell. É um belo avanço, mas tem um jeito muito melhor e muitíssimo mais fácil. |
|||||||||||||||||||||||
| Última atualização ( Seg, 08.02.2010 21:11 ) |