Navegação > Home / Arquivado em 'Programação web / PHP'

Linhas da tabela com cores alternadas

6 de fevereiro de 2009 por Reinaldo Nascimento  
Arquivado 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: , ,

Compactando o seu CSS com PHP

18 de janeiro de 2009 por Danival A. Souza  
Arquivado em Css, PHP, Programação web, Web Design

Comente

Compactar o arquivo CSS é uma das técnicas utilizadas para acelerar o processo de carregamento de um website. Algumas destas técnicas estão sendo amplamente utilizadas. Hoje, iremos descrever três maneiras diferente de compactar os arquivos CSS e enviar ao navegador do usuário, utilizando para isto o PHP.

O método de Paul Stamatiou

Este método já é utilizado por alguns desenvolvedores web a mais de um ano. Para fazer funcionar, você precisa primeiro renomear o seu arquivo NOME.css para NOME.css.php. (onde NOME é o nome do seu arquivo).

Então faça a modificação no HTML, utilizando o novo nome.

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

Após alterar o arquivo HTML, renomeie o css conforme informado, e então abra o arquivo para edição. Insira a seguinte linha de código no ínicio do arquivo:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

Então, adicione a próxima linha no final do arquivo. Salve, e feche o arquivo.

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Fim. Este método é bastante útil e eficiente.
Fonte: http://paulstamatiou.com/2007/03/18/how-to-optimize-your-css-even-more

O método Perishable Press

Este método é bem semelhante ao método descrito por Paul Stamatiou. Basicamente, você também precisa renomear seu arquivo .css para .css.php (ou .php somente), alterar a chamada a este arquivo no html para o novo nome, e então adicionar o seguinte bloco de código no início do seu arquivo CSS:

<?php
   ob_start ("ob_gzhandler");
   header ("content-type: text/css; charset: UTF-8");
   header ("cache-control: must-revalidate");
   $offset = 60 * 60;
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
   header ($expire);
?>

Em seguida salve o arquivo e feche-o. Com este método, você não precisa alterar o final do arquivo. Basicamente, esta é a grande diferença sobre o método anterior apresentado.

Fonte: http://perishablepress.com/press/2006/10/23/compressed-css-compression/

O método Reinhold Weber

Este método foi escrito pelo desenvolvedor Alemão Reinhold Weber. Particulamente, prefiro este método aos outros. Explicaremos por que mais abaixo. Por hora, vamos ao método.

Primeiramente, crie um arquivo .php, e insira o código abaixo (e coloque todos os seus CSS de include no código):

<?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("rn", "r", "n", "t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
  /* your css files */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');
  ob_end_flush();
?>

Por que eu prefiro este método? Simples, com este método não é necessário renomear o arquivo .css para .php. Além do mais, este método comprime todos os arquivos CSS utilizados no site de uma única vez, e envia para o computador do usuário através de uma única requisição, o que acelera muito o processo para sites que tem multiplos css (como o exemplo acima).

fonte: http://reinholdweber.com/?p=37

Tags: