Todos, ou quase todos, ao criar uma tabela já sentiram a necessidade de alternar a cor de fundo das linhas para facilitar a compreensão e a leitura da mesma. Vou, em 2 artigos, mostrar 4 formas de o fazer: no primeiro manualmente, utilizando HTML e automaticamente, com PHP. No segundo utilizando DOM Scripting e uma biblioteca Javscript, a jQuery.
O resultado pretendido é este:

Vamos utilizar os seguintes ficheiros base:

• tabela.html
• tabela-styles.css

Como podem reparar, no ficheiro CSS existe uma class .odd com as seguintes características:
.odd {
background-color: #ccf;
color: #000;
}
Esta class vai ser atribuída às linhas ímpares da tabela, de forma a alterar a cor de fundo das mesmas.

HTML

Manualmente, em HTML a nossa tabela ficaria assim:
(...)
<tbody>
<tr class="odd">
<td>1º</td>
<td>F.C. Porto</td>
</tr>
<tr>
<td>2º</td>
<td>S.L. Benfica</td>
</tr>
<tr class="odd">
<td>3º</td>
<td>Sporting C.P.</td>
</tr>
(...)
O exemplo da versão HTML.
Como a tabela é pequena é fácil ver a que linhas atribuir a class .odd. Esta maneira torna-se mais complicada à medida que o número de linhas vai crescendo. Vamos agora ver uma forma de alcançar o mesmo resultado, mas de forma automática.

PHP

Se na versão HTML tínhamos de atribuir manualmente a class .odd às linhas ímpares, utilizando PHP podemos automatizar essa tarefa. O código da tabela fica assim:
(...)
<tbody>
<?php
$clubes = array(
1 => 'F.C. Porto',
2 => 'S.L. Benfica',
3 => 'Sporting C.P.',
4 => 'Belenenses',
5 => 'Sp. Braga');
foreach($clubes as $id => $dados) {
if($id % 2 == 0)
$className = '';
else
$className = ' class="odd"';
echo '<tr'.$className.'><td>'.$id.'º</td>';
echo '<td>'.$dados.'</td></tr>';
}
?>
</tbody>
(...)
O exemplo da versão PHP.
O que o código anterior faz é o seguinte:

• Se o resto da divisão inteira do índice do clube por 2 for diferente de 0, então o índice é ímpar, portanto, o nome da class a atribuir à linha será .odd;
• Se esse valor for igual a 0, então o índice é par e não atribui nenhuma class à linha;
• Preenche as células com os dados correspondentes;

As vantagens deste método são óbvias: maior rapidez na criação do código e redução da possibilidade de falhas na atribuição das classes.
Vimos duas formas de obter as linhas de cor diferente numa tabela de dados. Existirão muitas outras formas de o fazer. Na segunda parte deste artigo mostro mais duas hipóteses, mas sem acrescentar elementos ao código da página, utilizando DOM Scripting e, posteriormente, uma biblioteca javascript, a jQuery.