Intercalar as cores de um uma tabela ou lista está muito presente no dia a dia de um programador ou webdesigner. Se você é desenvolvedor web, sabe bem do que estou falando.
Já vi muitos programadores escrevem códigos PHP ou ASP para produzir esse efeito de zebra, já vi tambem alguns webdesigners usam CSS + JavaScript para isso. Mas, graças ao CSS3, isso se tornou possível usando apenas duas linhas de código CSS.
tr:nth-child(even) {background: #FFF}
tr:nth-child(odd) {background: #EEE}
onde “even” corresponde às linhas pares e “odd” às linhas impáres.
esse pequeno bloco de código pode tambem ser usado em conjunto com vários outros componentes HTML ou em classes CSS. Veja um exemplo do uso em Listas.
li:nth-child(even) {background: #FFF}
li:nth-child(odd) {background: #EEE}
Agora, veja um exemplo do uso do zebrado anexado a uma classe css feita para formatar uma tabela.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
/*css global tabela*/
.full_table_list{width: 200px;border-collapse: collapse;}
/*colocando bordas nas linhas*/
.full_table_list tr{border:1px black solid;}
/*Definido cor das linhas pares*/
.full_table_list tr:nth-child(even) {background: #FFF}
/*Definindo cor das Linhas impáres*/
.full_table_list tr:nth-child(odd) {background: #EEE}
</style>
</head>
<body>
<table class="full_table_list">
<tr>
<td>
Linha 1
</td>
</tr>
<tr>
<td>
Linha 2
</td>
</tr>
<tr>
<td>
Linha 3
</td>
</tr>
<tr>
<td>
Linha 4
</td>
</tr>
</table>
</body>
</html>
Isso reproduziu o efeito mostrado na imagem abaixo.
Eu não sou nenhum especialista em CSS, mas se houver alguma dúvida relacionado ao assunto do post, usem a área de perguntas e respostas abaixo.
Carregando tweets...
Últimos Comentários