Muito comum, ne?! Todos nós já tivemos um dia que fazer uma tabela zebrada. Mas você ja tinha feito tabela zebrada css 3 ?

Eu por exemplo, já fiz diversas vezes isso do lado server-side, durante a listagem de dados, calculando um contador dentro do loop de registros. Algo parecido com isso aqui:

Tabela Zebrada em php

<html>
<head>
  <meta charset="utf8" />
<style type="text/css">
.dif { background: #ccc; }
</style>
</head>
<body>
<?php

  $data = Array(
      0 => Array( 'name'=> 'William Moraes', 'idade'=> '23 anos', 'alias'=> 'wbruno' ),
      1 => Array( 'name'=> 'Marco Silva', 'idade'=> '24 anos', 'alias'=> 'jorge alex' ),
      2 => Array( 'name'=> 'Marcio Hanashiro', 'idade'=> '25 anos', 'alias'=> 'japa' ),
      3 => Array( 'name'=> 'Dany Garrido', 'idade'=> 'não sei', 'alias'=> 'delicinha' ),
      4 => Array( 'name'=> 'Heric Tilly', 'idade'=> '32 anos', 'alias'=> 'tilly' ),
      5 => Array( 'name'=> 'Felipe Marx', 'idade'=> 'não sei', 'alias'=> 'marx' ),
      6 => Array( 'name'=> 'Camila Kamimura', 'idade'=> 'não sei', 'alias'=> 'japinha' ),
      7 => Array( 'name'=> 'Raquel Dalastti', 'idade'=> 'não sei', 'alias'=> 'dalastti' ),
      8 => Array( 'name'=> 'Bianca Lu', 'idade'=> 'não sei', 'alias'=> 'luttenchuijlkwypl' ),
      9 => Array( 'name'=> 'Jacqueline Pereira', 'idade'=> 'não sei', 'alias'=> 'jacque' )
    );

  echo '<table id="tabela-zebrada">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Idade</th>
        <th>Alias</th>
      </tr>
    </thead>';

  echo '<tbody>';

  $i = 0;
  foreach( $data AS $item ){
    $class = $i%2==0 ? ' class="dif"' : '';
    echo '<tr'.$class.'>
      <td>'.$item['name'].'</td>
      <td>'.$item['idade'].'</td>
      <td>'.$item['alias'].'</td>
    </tr>';

    $i++;
  }
  echo '</tbody>
  </table>';
?>

</body>
</html>

Lógico que funciona. Mas hoje em dia, não é mais a única forma de fazer esse efeito.

Podemos por exemplo, fazer tabela zebrada com javascript:

Tabela Zebrada em javascript

<script type="text/javascript">
window.onload = function(){
  var trs = id('tabela-zebrada').getElementsByTagName('tbody')[0].getElementsByTagName('tr');

  for( var i=0, max = trs.length; i&l;max; i++ ){
    if( i%2==0 ) trs[i].className = 'dif';
  }
}
var id = function( el ){
  return document.getElementById( el );
}
</script>

Entretanto, ainda assim não é muito mais natural esses cálculos tecnicamente simples, ficarem a cargo de linguagens como esstas. Podemos usar seletores css para zebrar tabelas, selecionar primeiros ou últimos elementos, ímpares, pares..

Tabela Zebrada CSS 3

Hoje em dia, podemos usar o poderoso seletor css nth-child das css 3, assim como o Marco Bruno, mostrou que é possível, Tabela Zebrada CSS 3 – Pseudo Seletor nth-child.

<style type="text/css">
#tabela-zebrada tbody tr:nth-child(2n+1) { background: #ccc; }
</style>

Simples, não ?

E muito mais intuitivo. Já que estilização é dever da linguagem css, então, o seletor nth-child veio para nos ajudar a não misturar as camadas de desenvolvimento.