Tabela “zebrada” com JavaScript e CSS3

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…

<table id="modificadores">
	<thead>
		<tr>
			<th></th> <!-- Primeria célula em branco -->
			<th>private</th>
			<th>default</th>
			<th>protected</th>
			<th>public</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Mesma classe</td>
			<td>Sim</td>
			<td>Sim</td>
			<td>Sim</td>
			<td>Sim</td>
		</tr>
		<tr>
			<td>Mesmo pacote</td>
			<td>Não</td>
			<td>Sim</td>
			<td>Sim</td>
			<td>Sim</td>
		</tr>
		<tr>
			<td>Pacotes diferentes (sendo subclasses)</td>
			<td>Não</td>
			<td>Não</td>
			<td>Sim</td>
			<td>Sim</td>
		</tr>
		<tr>
			<td>Pacotes diferentes(não sendo subclasses)</td>
			<td>Não</td>
			<td>Não</td>
			<td>Não</td>
			<td>Sim</td>
		</tr>
	</tbody>
</table>

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:

*{ /* 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;
}

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:

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

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:

window.onload = function(){
	tableZebra("modificadores", "zebra");
};

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:

table#modificadores tr.zebra{
	background: #ededed;
}

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:

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;
}

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!

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