Navegação > Home / PHP / Linhas da tabela com cores alternadas

Linhas da tabela com cores alternadas

fevereiro 6, 2009 por Reinaldo Nascimento  
Em PHP

2 Comentários

Essa é uma rotina muito simples, eu reconheço. Mas quem é que volta e meia não se depara com a necessidade de fazer tabelas com cores alternadas ou então alternar algum elemento entre dois estados ou qualquer coisa do tipo?

Pois é, para quem precisar, está aí uma forma bem simples de fazer cores alternadas em tabelas.

<?php
 
	// Dados a serem colocados na tabela
	$dados = array(
				   array('O gato de botas', 50, '11,90'),
				   array('Rapunzel', 50, '12,90'),
				   array('O três porquinhos', 50, '15,90'),
				   array('A bela e a fera', 50, '10,00'),
				   array('Chapeuzinho Vermelho', 50, '18,90'),
				   array('Hary Potter', 50, '23,00'),
				   array('A lenda de Peter Pan', 50, '9,60'),
				   array('A nova onda do Imperador', 50, '17,75')
				   );
	$cor1 = 'cor1'; // Nome da classe da cor 1
	$cor2 = 'cor2'; // Nome da classe da cor 2
 
	// Início da tabela
	$tabela = '<table>
			       <tr>
				       <th>Título</th>
					   <th>Quantidade</th>
					   <th>Preço</th>
				   </tr>';
 
	for ( $i=0; $i < count($dados); $i++ )
	{
		// O pulo do gato :)
		( $i % 2 == 0 ) ? $cor = $cor1 : $cor = $cor2;
 
		// alimenta a tabela com os dados
		$tabela .= '<tr class="'. $cor .'"><td>'. $dados[$i][0] .'</td><td>'. $dados[$i][1] .'</td><td>R$ '. $dados[$i][2] .'</td></tr>';
	}
 
	 // finaliza o html da tabela
	$tabela .= '</table>';
 
?>

Salve o arquivo como, por exemplo, tabela.php.

O próximo passo é imprimir o resultado na tela. Isso é simples, claro que você pode incluir o código acima em uma função e chamar o resultado em template, mas aqui, vamos apenas imprimir o resultado em uma página html simples.

Crie um arquivo html no modelo abaixo:

<?php include('tabela.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabela com cores alternadas</title>
 
 
 
<style type="text/css">
<!--
table {
	border: 1px solid #cfcfcf;	
}
 
th {
	font: 700 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #fff;
	background-color: #069;
	text-align: left;
	padding: 0 10px;
}
 
td {
	font: 11px Tahoma, Geneva, sans-serif;
	color: #505050;
	padding: 4px;
}
 
.cor1 {
	background-color: #efefef;
}
 
.cor2 {
	background-color: #ccc;
}
 
-->
</style>
</head>
 
<body>
 
	<?php print $tabela; ?>
 
</body>
</html>

O resultado:

tabela_cores

É isso aí, até a próxima!

Tags: , ,

Posts Relacionados

Comentários

2 Respostas por “Linhas da tabela com cores alternadas”

Trackbacks

Saiba os que outros dizem sobre esse artigo...


Deixe sua mente falar!

Conte-nos o que você pensa sobre este artigo...
ah sim, e se você quiser personalizar seu comentário, adquira um gravatar!