«

»

jan 27

Intercalando cores entre linhas de uma tabela ou lista usando CSS3

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.

Sobre o autor

Tarcísio

Bacharel em Engenharia da Computação, programador C / C++ , especialista em PHP, MySQL, PostgreSQL.

7 comentários

Pular para o formulário de comentário

  1. Leandro

    Muito bom mesmo, amigo. Valeu!

  2. Carlos

    Cara, muito bom sua dica. De fato tava batendo a cabeça atoa. Abraços!

  3. naotil

    não funciona no IE8 :/

  4. Santhiago

    IE 9 tbm não

  5. Paulo Santos

    utilizando esse código no css deu certo sim, quero agora mudar a cor da linha quando passar o mouse sobre ela, como fazer ?

  6. Paulo Santos

    Descobri como mudar a linha com o passar do mouse:

    .tabela tr:hover:nth-child(odd){
    background-color:#bbb;
    }

    obrigado.

    1. Francisco Júnior

      Paulo, você nem precisa repetir toda a linha para fazer a mudança do background, basta aplicar a cor à tag tr, como abaixo (por exemplo):

      tr:hover{background-color: #000; color: #fff;}

      Abraços.

Deixe uma dúvida, resposta ou sugestão