Como fazer Tabela Zebrada CSS 3, javascript e php
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.