O Planet Geek, criado pelo Mário Gamito, é, na sua essência, um agregador de blogs. Os conteúdos que são apresentados na página principal são retirados de vários blogs, com a autorização expressa dos seus respectivos autores.

Esta nova versão utiliza, como base de funcionamento, a CodeIgniter, uma framework PHP gratuita, leve, bastante rápida e muito bem documentada que permitiu poupar muito tempo no desenvolvimento. Para além do novo visual, foram acrescentadas novas secções ao site, como a página individual dos membros e a secção de podcasts.

Espero que gostem da nova versão do site. Como sempre há coisas a retocar, a melhorar mas, enquanto isso, visitem o Planet Geek, vale a pena.

• 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.