Tabelas com linhas em cores alternadas

Publicado em: 02/03/2005
Atualizado em: 12/03/2011

Introdução

Tabelas em projetos CSS?

Sim! O uso de tabelas em projetos CSS é perfeitamente válido desde que observadas algumas recomendações de uso e construção, preconizadas pelas Recomendações do W3C para a linguagem HTML, que resumidamente aconselham o seguinte.

• usar tabelas unicamente para apresentação de dados tabulares;
• contruí-las acessíveis aos leitores de tela e demais agentes de usuário em geral;

Links relacionados:
Recomendações do W3C para Construção de tabelas (em inglês).
Recomendaçãos do W3C para Técnicas para acessibilidade em tabelas (em inglês).
Recomendações do W3C para Acessibilidade à conteúdos de tabelas (em português).

Objetivo e escopo deste tutorial

Neste tutorial mostrarei como estilizar uma tabela de modo a aplicar-lhe um visual do tipo linhas em cores alternadas, também conhecido como "efeito zebra", tão comum em tabelas de apresentação de dados.

Usei na codificação da tabela que serviu de exemplo para esse tutorial apenas os elementos HTML table, tr e td mas ressalvo que a não utilização dos demais elementos de construção de tabelas conforme as Recomendações do W3C conforme links citados no item anterior visam a simplificar o código já que nosso objetivo é mostrar como estilizar linhas de tabelas em cores alternadas.

Ao construir suas tabelas não se limite aos três elementos citados.
Siga as recomendações do W3C! :-)

O código da tabela

Abaixo o código da tabela que usaremos neste tutorial.

<table border="1px" cellpadding="5px" cellspacing="0">
	<tr> 
		<td>Célula 1-1 </td>
		<td>Célula 1-2</td>
		<td>Célula 1-3</td>
	</tr>
	<tr> 
		<td>Célula 2-1 </td>
		<td>Célula 2-2</td>
		<td>Célula 2-3</td>
	</tr>
	<tr> 
		<td>Célula 3-1 </td>
		<td>Célula 3-2</td>
		<td>Célula 3-3</td>
	</tr>
	<tr> 
		<td>Célula 4-1 </td>
		<td>Célula 4-2</td>
		<td>Célula 4-3</td>
	</tr>
	<tr> 
		<td>Célula 5-1 </td>
		<td>Célula 5-2</td>
		<td>Célula 5-3</td>
	</tr>
</table>

Defini borda, cellpadding e cellspacing no elemento table para simplificar. Use CSS para estas definições.

Ver a renderização da tabela

A técnica adotada

Ver a tabela estilizada.

Conforme visto no link acima, nosso objetivo é o de alternar a cor das linhas da tabela em cinza claro #eee e creme #ffc.

Vamos fazer assim:

1. estabelecer uma regra CSS para atribuir uma das cores para fundo de toda a tabela;
2. estabelecer outra regra CSS para sobrescrever com a outra cor as linhas, alternadamente.

Definindo ID e classes

Para que as regras CSS sejam válidas somente para uma tabela na página vamos criar um ID para a tabela.
Chamaremos este ID de alter.
Nota: Se você pretende estilizar todas as tabelas do seu site de maneira idêntica não é necessário esta ID, aplique as regras CSS direto no elemento table;

Se você pretende estilizar algumas tabelas do seu site de maneira idêntica, crie uma classe e não ID, pois como você já deve saber, ID deve ser única no documento e classe pode ser repetida no mesmo documento.

Para estilizar linhas alternadas diferentemente, vamos criar uma classe para aplicar nos elementos tr alternados.
Chamemos esta classe de dif.

Os seletores para aplicar estilos

Para aplicar a cor em toda a tabela usaremos o seletor contextual:
table#alter tr td
que determina a aplicação da regra CSS nas td's dentro das tr's que estão dentro de table com ID=alter (leia o seletor da esquerda para a direita)

Para sobrescrever a cor em linha alternadas atribuimos a classe dif para as linhas tr alternadas e usaremos o seletor contextual
table#alter tr.dif td (leia o seletor conforme mostrado acima)

A segunda regra CSS sobrescreve (tem prioridade) sobre a primeira por ser mais específica. Ver tutorial sobre especificidade da regra CSS.

Aplicando o ID e a classe no código

<table border="1px" cellpadding="5px" cellspacing="0" ID="alter">
	<tr> 
		<td>Célula 1-1 </td>
		<td>Célula 1-2</td>
		<td>Célula 1-3</td>
	</tr>
	<tr class="dif"> 
		<td>Célula 2-1 </td>
		<td>Célula 2-2</td>
		<td>Célula 2-3</td>
	</tr>
	<tr> 
		<td>Célula 3-1 </td>
		<td>Célula 3-2</td>
		<td>Célula 3-3</td>
	</tr>
	<tr class="dif"> 
		<td>Célula 4-1 </td>
		<td>Célula 4-2</td>
		<td>Célula 4-3</td>
	</tr>
	<tr> 
		<td>Célula 5-1 </td>
		<td>Célula 5-2</td>
		<td>Célula 5-3</td>
	</tr>
</table>

As regras de estilo

Agora podemos definir as regras de estilo para alternar cores de linhas na tabela.
São elas:

table#alter tr td { /* Toda a tabela com fundo creme */
	background: #ffc;
	} 
table#alter tr.dif td {
	background: #eee; /* Linhas com fundo cinza */
	}

O código completo

Para ver o código completo XHTML + CSS da tabela estilizada veja o código fonte desta página