Zebra Table
28/11, 2005 12:00 por Fellipe
O problema
Sempre que existia a necessidade de criar uma tabela zebrada, ou seja, com cores alternadas entre as <tr> (Table Row) de uma tabela, logo eu iria recorrer a uma solução precária de um ponto de vista semântico. Mandava meu script ASP (eca!) ou PHP (eba!) alternar class=”cordiferente” entre as linhas. Isso é ruim pois coloco a estrutura em função da estética, e isso NÃO DEVE ACONTECER JAMAIS!!!
Em um apelo desesperado o Google me ajuda, apontando para o A List Apart como primeira resposta para minha questão. Entro sem pestanejar, e lá está. ZebraTable é seu nome, e seu autor é David F. Miller. O link para a matéria é http://www.alistapart.com/articles/zebratables/.
Como quase sempre, o ALA resolve meus problemas com algo simples e prático de usar. Eu acho uma grande sacada o site e aconselho assinar seu RSS. Para facilitar, o endereço é http://www.alistapart.com/rss.xml.
A solução
O script, vulgo, javascript, resolve o zebrado no cliente, e não no servidor. Isso é ótimo! Não preciso alterar a minha estrutura em função de um detalhe estético. Então, pinto e bordo com o esquema pronto. Este script é bom por que:
- Não maltrata o servidor, resolve tudo no cliente.
- Funcionou no Firefox, IE, Opera (nos meus limitados testes)
- É totalmente descartável, ou seja, se não funcionar, não estraga.
- Não é preciso ter conhecimento técnico para aplicar!
O problema novamente
Mas o original também vem acompanhado de algumas limitações, por exemplo, não posso mudar a cor do texto, somente do background. Isso é muito ruim, pois se resolvo usar uma cor de fundo muito escura pode ser que meu texto vá para o vinagre. Outro ponto negativo é a forma de controle de cores. É preciso usar onload no <body> para chamar a função. Isso é estruturalmente ruim, mas não tanto quanto o problema das classes inline.
Problemas resolvidos
Baseado em mais algumas procuras pela web, achei a solução para estes 2 problemas. Eu já tinha resolvido o lance de colorir as letras, mas passava a instrução através de um argumento na função, o que me impossibilitava simplesmente eliminar o raio da declaração dos argumentos, problema que era muito mais gritante.
Foi neste link http://validweb.nl/…zebra-tables/ que encontrei uma meia-solução definitiva, que por acaso, era baseado no mesmo problema. O poster deste site criou um esquema em JS que substituía o proposto no ALA. Felizmente, além de melhor, continuou compatível.
Eu consegui modular a solução, de forma que tudo fique muito mais acessível, e distribui em 3 partes:
O Script ficou tão bom que agora existe até o controle do HOVER nas células. O trabalho final também pode ser visto em ação.
Adicionando um Sort
Fonte http://www.kryogenix.org/…sorttable/
Como se já não tivesse bom, resolvi pintar mais a cara filho. Mesclei com o esquema anterior (zebratable) a funcionabilidade de sort.
Sort significa ondenar em nossa língua, então, após esta implementação, podemos ordenar por ordem alfabética ou numérica qualquer conjunto de valores que preencha uma coluna.
Para tal, utilizamos outros 2 arquivos: um CSS e um JS. Modificamos também o HTML zebratable original, veja:
Infelizmente, a execução deste último ainda contém alguns defeitos. Como exemplo, ao ordenar os valores de uma coluna, o zebrado permanece marcando as linhas antigas. Outro fator ruim é o funcionamento no Opera. O efeito de hover ficou distorcido, mas isso não atrapalha muito, só fica esteticamente feio.
Para ver o script em ação… dê play!
Se você quer somente a funcionabilidade de sort no esquema, retire o <script> e <link> que apontam para o zebratable CSS e JS. Valew!
Este artigo foi publicado Monday, 28 de November de 2005 às 12:00 e foi categorizado como webstandards, Cookbook, DOM Lab.
Você pode acompanhar os comentários deste post assinando o comment RSS (RSS 2.0 [?]).
Você também pode comentar ou atrelar um trackback [?] daqui no seu site.
3 comentários para “Zebra Table”
Deixe seu parecer sobre o artigo
- The WordPress Engine.
15 de December, 2005 às 17:34
would be nice if the table was “re-striped” after a sort operation. currently, it’s only using alternating stripes when it’s sorted by ID.
and to return your cross-linking:
Here comes my 2 cents…
I made an article based on Miller’s Zebra Tables on 24 ways: splintered striper (english).
20 de February, 2006 às 15:12
Olá, Fellipe!! Já conhecia este script para ordenação de tabela e fiz umas alterações interessantes no original, que tem uns problemas, como thead com rowspan, tabelas com tfoot e ordenação de números negativos e decimais. Se tiver interesse, posso compartilhar a minha solução (com algumas gambiarras, mas funciona…)
23 de February, 2006 às 11:12
[…] […]