Tabela “zebrada” com JavaScript e CSS3

By | 25 de dezembro de 2009

Antes de qualquer coisa: Feliz Natal para vocês, gordos! Muitas felicidades, sucesso, paz, comida, saúde, etc. etc. etc. ;)

Bem, neste tutorial irei mostrar como fazer aquela tabela “zebrada”. Apresentar-lhe-eis (Uia que chique ^^) duas formas.

Vamos, primeiro, montar nosso HTML e CSS, para não ficar tão feio…

[sourcecode language='html']

private default protected public
Mesma classe Sim Sim Sim Sim
Mesmo pacote Não Sim Sim Sim
Pacotes diferentes (sendo subclasses) Não Não Sim Sim
Pacotes diferentes(não sendo subclasses) Não Não Não Sim

[/sourcecode]

Vejam que eu coloquei a parte “explicativa” da tabela dentro de um cabeçalho, a tag thead e os dados dentro do corpo da tabela, a tag tbody. E o resto vocês conhecem, tr para linhas e td para cada célula.

Agora o CSS:
[sourcecode language='css']
*{ /* CSS Reset */
margin: 0;
padding: 0;
}
table#modificadores{
margin: 50px auto 0 auto; /* Centralizo com 50px no topo */
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt; /* O tamanho da fonte em "pt" */
border-collapse: collapse; /* Define que a borda vai ser única na tabela */
}
table#modificadores tr{
background: #f7f7f7;
}
table#modificadores tr td,
table#modificadores thead tr th{
padding: 5px 10px;
}
table#modificadores tbody tr td{
text-align: center;
}
table#modificadores tbody tr td:first-child{ /* No primeiro "td" de cada "tr", dentro do "tbody", vai ser alinhado à esquerda */
text-align: left;
}
[/sourcecode]
Eu comentei o CSS nas partes que considero mais importantes para o entendimento, então só ler eles. ;)

Agora sim vamos dar vida a nossa tabela! ^^

Com JavaScript:
A função que irá fazer a tabela listrada é essa:
[sourcecode language='javascript']
function tableZebra(tableID, classTR){ //Declaro a função
var tr = document.getElementById(tableID).getElementsByTagName("tr"); //Pego todas as "tr" dentro da tabela com "id" que recebemos
var trLength = tr.length; //Pega a quantidade/tamanho de "tr" existentes
for(var i = 0; i < trLength; i++){ //Percorro todos os "tr" no loop
if(i % 2 == 0){ //Conta matemática apenas para definir quem vai receber o "class"
tr[i].className = classTR; //Atenção aqui: para definir "class" no elemento, não se usa "element.class", e sim "element.className". Isso por que a palavra "class" é reservada
} //Fecha instrução "if"
} //Fecha loop "for"
} //Fecha bloco de função[/sourcecode]
Ela recebe dois parâmetros: tableID e classTR.

O tableID, como o próprio nome diz, recebe o id da tabela.
O classTR recebe o nome do class que vai estilizar o tr.

Atente-se na linha #6. ;)

Usando:
[sourcecode language='javascript']
window.onload = function(){
tableZebra("modificadores", "zebra");
};[/sourcecode]
Se você testar este código, verá que nada vai acontecer. Isso por que não criamos o bloco, no CSS, que vai estilizar o .zebra. No meu fiz assim:
[sourcecode language='css']
table#modificadores tr.zebra{
background: #ededed;
}
[/sourcecode]

Pronto, pode testar agora. ^^

Com CSS:
A pseudo-classe que usei foi a nth-child. Ela é uma espécie de “seletor” e funciona com a regra que você define entre parênteses. O mais legal é que você pode usar matemática nela, sendo an+b a fórmula. Onde a e b são números. Um exemplo:

  • 2n+2
    • Quando n for igual 0: 2 vezes 0 + 2 = 2
    • Quando n for igual 1: 2 vezes 1 + 2 = 4
    • Quando n for igual 2: 2 vezes 2 + 2 = 6
    • E assim em sucessivamente

Legal, não?

Porém eu não usei expressão matemática no meu. Trabalhei com even (par) e odd (ímpar). Veja:
[sourcecode language='css']table#modificadores thead tr:nth-child(odd), //Usei "odd" aqui para pegar o único "tr" dentro do "thead"
table#modificadores tbody tr:nth-child(even){
background: #ededed;
}[/sourcecode]

Exemplo online com JavaScript e CSS.

Espero que tenham gostado e aprendido! ^^ Qualquer dúvida, posta aê. ;)

Abraços e mais uma vez, Feliz Natal! Santa

P.S.: A tabela eu peguei deste post. :)

2 thoughts on “Tabela “zebrada” com JavaScript e CSS3

  1. Leonardo Tavares

    Thiago parabéns! Achei muito interessante a pseudo-classe nth-child, o uso de even e odd facilita e pode ajudar bastante :D Mais o que chamou minha atenção, foi poder aplicar uma solução matemática e isso abre um caminho muito grande para idéias rsrs…

    Reply

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *