Zebrar tabela usando CSS

Aprenda como Zebrar as linhas de sua tabela usando apenas o CSS.

Publicado em 05/05/2015 11:50

Em algumas partes do projeto, onde se usa tabelas, é interessante zebrar as linhas, para que o leitor não se perca ficar elegante e até mesmo mais fácil de encontrar ou visualizar o que procura.

Zebrar uma tabela consiste em deixar linhas impares ou pares de cores diferentes, como pode ser notado no exemplo abaixo.

Para obter este resultado, podemos fazer de várias formas, com PHP, Javascript e apenas com CSS, sendo que PHP e JS vão ter que manipular o CSS, então a melhor forma é fazer direto no CSS for ser mais rápido, correto e organizado.

Para zebrar usamos uma pseudo-class, denominada nth-child(evento), onde evento assume vários valores, que podem ser:

ODD – Linhas ou Colunas Pares;
Even – Linhas ou colunas Ímpares;
3n+0 – A cada três linha ou coluna.

Observe o código de sua aplicação CSS abaixo.

Código 01:

table:nth-child(odd){
	background-color:#CCC;
}

table:nth-child(even){
	background-color:#EEE;
}

table:nth-child(3n+0){
	background-color:#666;
}

Há certo problema de trabalhar com este pseudo-class, mas isto apenas se dentro de sua tabela for inserido uma segunda tabela, pois desta forma o CSS não vai zebrar de forma certa, mas nada não possa ser ajustado, para resolver isto crie uma segunda formatação para a tabela interna.

Veja baixo um segundo exemplo de código, agora a aplicação CSS com o HTML.

Código 02:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Zebrar tabela com CSS - SatellaSoft</title>
		<meta charset="utf-8" />
		<style>
			.tbZebra{ /*Acessa a tabela*/
				border: 1px solid #1E90FF; /**/
			}
			
			.tbZebra thead{ /*Acessa o cabeçalho da tabela*/
				background-color:#1E90FF; /*Adiciona um Background*/
			}
			
			.tbZebra tr th{ /*Acessa o Table Head*/
				padding:5px; /*Espaçamento de 5PX*/
				color:#FFF; /*Cor do texto para branco*/
				text-align:left; /*Alinhamento do texto para esquerda*/
			}
			
			.tbZebra tbody tr{ /*Acessa as linhas do tbody*/
				background-color:#B0C4DE; /*Adiciona um Background*/
				padding:5px; /*Espaçamento de 5PX*/
			}
			
			
			/*
				even = Ímpar, a cada linha onde for valor Ímpar
				odd  = Par, a cada linha onde o valor for Par
			*/
			.tbZebra tbody tr:nth-child(even){ /*Acessa cada filho*/
				background-color:#87CEEB; /*Altera a cor de fundo para a linha*/
			}
		</style>
	</head>
	<body>
		<table class="tbZebra">
			<thead>
				<tr>
					<th>Nome:</th>
					<th>Cidade:</th>
					<th>Edtado</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Gunner</td>
					<td>Iepê</td>
					<td>São Paulo</td>
				</tr>
				<tr>
					<td>Jaime</td>
					<td>Tangamandapio</td>
					<td>Rio de Janeiro</td>
				</tr>
				<tr>
					<td>Willian</td>
					<td>Maringa</td>
					<td>Paraná</td>
				</tr>
				<tr>
					<td>Jéssica</td>
					<td>Presidente Prudente</td>
					<td>São Paulo</td>
				</tr>
				<tr>
					<td>Gabriel</td>
					<td>Iepê</td>
					<td>São Paulo</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Em caso de dúvidas, deixem nos comentários, até a próxima!