:: Tabelas com linhas em cores alternadas ::

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 Web Standards. Recomendações estas, fora do escopo deste tutorial e que resumidamente tratam dos seguintes aspectos:

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 tão comum em tabelas de apresentação de dados.

Usei na codificação da tabela exemplo, apenas os elementos HTML <table>, <tr> e <td> mas ressalvo que a não utilização dos demais elementos de construção conforme as recomendações do W3C e citadas no item anterior visam a simplificar o código já que nosso objetivo é mostrar como estilizar linhas 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 #EEEEEE e creme #FFFFCC.

Vamos fazer assim:

estabelecer uma regra CSS para atribuir uma das cores para fundo de toda a tabela;
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 uma ID para a tabela.
Chamaremos esta 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 da 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 a 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>