Fato
Todos percebemos a grande dificuldade em compreender o processo para apresentar resultados de uma consulta em várias colunas. Do ponto de vista pessoal, acredito que seja devido à não compreensão do que cada um realmente quer fazer.
Solução
Uma solução simples, que facilitaria muuuuuito a vida de quem desejar colunizar dados, seria a apresentação sem tabelas (tableless), maaaaaas, podemos apresentar dados tabulares algumas vezes, ou de forma mais convincente, tableless não é um padrão tão utilizado...
Com tabelas, vamos, sempre, criar uma simulação do resultado final. Acredite, isso irá ajudar muito na compreensão.
Ok... Let the carnage, begin!
Ahhh, e por favor, leiam as explicações para realmente compreender o processo. Somente com os códigos não será tão definitivo assim esse guia
----------------------------
TABLELESS
Vamos começar pela maneira simples. Para fazer uma exibição em colunas, utilizando apenas divisores de conteúdo (<div>), simplesmente criaremos um container e cada um dos dados. Neste exemplos, exibiremos imagens diferentes, supondo uma galeria de imagens.
CSS
.container
{
width: 400px;
}
.div_imagem
{
float: left;
width: 100px;
}Para quem conhece, já sabe o que isso vai resultar, não? Um perfeita e simples colunização. Todo o segredo dessa "técnica" está no float: left;, que fará com que cada uma das div com a classe div_imagem se alinhe a direita da anterior, e, assim que acabar com a capacidade máxima do container, ela será automaticamente jogada para a próxima linha.
Exemplo
<div class="container">
<?php
for($i = 1; $i <= 100; $i++)
{
?>
<div class="div_imagem"><img width="75" height="75" src="imagens/<?php print($i); ?>.jpg" /></div>
<?php
}
?>
</div>O que teremos desta vez?
100 div's com a classe "div_imagem".
E como ficará o resultado final?
Um simples cálculo aritmético, veja:
Nossa largura do container?
400px
Largura de cada uma das div's das imagens?
100px
Logo:
400 / 100 = 4 imagens por linha
Veja que nenhum trabalho adicional é realizado desta forma. Essa, portanto, é a maneira mais simples, fácil e rápida para apresentação de dados em colunas.
----------------------------
TABLE
Fascinado com a facilidade em CSS? Acostume-se, ele veio para facilitar. Mas, temos também, algumas ocasiões onde é necessário a apresentação de dados em colunas utilizando tabelas. E como fica?
Vamos primeiramente, criar nossa Tabela Mestra. Seguiremos o mesmo exemplo utilizado anteriormente, 4 colunas por linha.
Sugestão: Crie a tabela com 2 linhas, dessa forma, você entenderá como funcionará a repetição.
<table width="400"> <tr> <td width="100"><img width="75" height="75" src="imagens/1.jpg" /></td> <td width="100"><img width="75" height="75" src="imagens/2.jpg" /></td> <td width="100"><img width="75" height="75" src="imagens/3.jpg" /></td> <td width="100"><img width="75" height="75" src="imagens/4.jpg" /></td> </tr> <tr> <td width="100"><img width="75" height="75" src="imagens/5.jpg" /></td> <td width="100"><img width="75" height="75" src="imagens/6.jpg" /></td> <td width="100"><img width="75" height="75" src="imagens/7.jpg" /></td> <td width="100"><img width="75" height="75" src="imagens/8.jpg" /></td> </tr> </table>
Por fim, teremos esta tabela. Largura de 400 pixels, cada linha contendo 4 colunas.
O MAIS IMPORTANTE, O QUE DEVEMOS ENTENDER É: O QUE DEVE SER REPETIDO, E QUANDO APRESENTAR.
Nosso trecho a ser repetido SEMPRE é somente:
<td width="100"><img width="75" height="75" src="imagens/X.jpg" /></td>
E o que deve ser apresentado de TEMPOS EM TEMPOS é as <tr>.
Vamos simular um código, nossa primeira tentativa de repretição:
<table width="400">
<tr>
<?php
for($i = 1; $i <= 100; $i++)
{
?>
<td width="100"><img width="75" height="75" src="imagens/<?php print($i); ?>.jpg" /></td>
<?php
}
?>
</tr>
</table>Como podem ver, SEM SUCESSO.
Mas o que eu fiz de errado?
Tudo. Simplesmente tudo, queremos exibir linhas também, não somente repetir colunas. Até onde conheço, um <td> criará sempre uma outra coluna, nunca uma nova linha.
O que devo fazer para solucionar isso?
Colocar no intervalo desejado a nossa linda <tr>.
Ok, vamos à nossa segunda tentativa:
<table width="400">
<tr>
<?php
for($i = 1; $i <= 100; $i++)
{
?>
<tr>
<td width="100"><img width="75" height="75" src="imagens/<?php print($i); ?>.jpg" /></td>
</tr>
<?php
}
?>
</tr>
</table>E agora? Por quê não funcionou?
Colocar no INTERVALO DESEJADO a nossa linda <tr>.
Intervalo Desejado != Sempre
Qual o nosso intervalo desejado? A cada 4 colunas, correto? Pronto, vamos à mais um código:
<table width="400">
<tr>
<?php
$cont = 1;
for($i = 1; $i <= 100; $i++)
{
if($cont == 1)
{
print("<tr>");
}
?>
<td width="100"><img width="75" height="75" src="imagens/<?php print($i); ?>.jpg" /></td>
<?php
if($cont == 4)
{
print("</tr>");
$cont = 1;
} else
{
$cont++;
}
}
?>
</tr>
</table>Funcionou, não? Mas vamos com calma, para quem apenas deseja dividir o conteúdo em colunas, ótimo, vai funcionar, apenas lembre-se de alterar o 4 para o número de colunas desejadas. 10, 15, 30. Vai funcionar.
Mas por quê funcionou?
A nossa <td> exibimos SEMPRE. O segredo está nas <tr>'s. Lembre-se do ditado:
- O segredo está nas entre-linhas.
Neste caso, está na linha, literalmente
Como é esse segredo?
vamos à primeira condicional:
if($cont == 1)
{
print("<tr>");
}Analisando:
Se o nosso $cont (contador) for igual a 1, ou seja, a primeira coluna de uma linha, devemos exibir essa nova linha. Certo?
Já a segunda condicional:
if($cont == 4)
{
print("</tr>");
$cont = 1;
} else
{
$cont++;
}Verifica se o nosso $cont for igual a 4, ou seja, a última coluna de uma linha, caso seja, devemos exibir o fim desta linha e passar o nosso contador devolta à 1, reiniciando o processo. Caso ele não seja o último elemento, devemos apenas incrementar seu valor.
----------------------------
OTIMIZAÇÕES
Como já dito, para quem apenas gostaria de entender como repetir os dados em colunas, já pode se deliciar com o exemplo apresentado acima.
Mas e aqueles que desejam sempre algo mais? Bom, para esses individuos, temos nossas Otimizações.
Pra que diabos preciso de um novo contador? Já não possuo o $i?
Exato! Não precisamos dele.
Antes de tentar eliminar nosso contador, vamos compreender os passos para trabalhar sem ele.
Não poderemos alterar o valor do $i, ou alguém aqui fica estourando índices por aí? Ai ai ai...
Mas então, como vou saber se é a primeira ou a última coluna com o $i em 4+?
Módulo (%).
Esse operador aritmético nunca foi apresentado por seus professores de matemática, hein?
O quê ele faz e como utilizá-lo?
Veja alguns exemplos:
<?php print(5 % 2); // 1 print(5 % 3); // 2 print(10 % 6); // 4 ?>
Ahh, agora eu ent... O QUÊ?! COMO ESSES RESULTADOS?!
Calma, calma, ele retorna o resto de uma divisão. Ou seja, 5 dividido por 2 = 2, mas, sobrando 1.
10 / 6 = 1
Sobrando 4
Compreendês ombre? Ele realiza uma divisão exata, retornando apenas a sobra.
E como isso vai me ajudar?
Veja um exemplo novamente:
<?php
for($i = 1; $i <= 100; $i++)
{
print(($i % 4) . "<br />");
}
?>Qual foi o resultado obtido?
3, 2, 1, 0, 3, 2, 1, 0, 3, 2, 1, 0, ...
Temos uma contagem de 3 à 0, o que o nosso antigo $cont (1 à 4) fazia.
<table width="400">
<tr>
<?php
for($i = 1; $i <= 100; $i++)
{
if(($i % 4) == 3)
{
print("<tr>");
}
?>
<td width="100"><img width="75" height="75" src="imagens/<?php print($i); ?>.jpg" /></td>
<?php
if(($i % 4) == 0)
{
print("</tr>");
}
}
?>
</tr>
</table>Só perceba que alteramos os valores de comparação. Agora ele não indica qual posição está a coluna, mas sim, quantas faltando para o fim.
Comparamos agora seu valor com 3, para o inicio, e com 0 para o fim.
----------------------------
Como diria um certo filme:
Não olhe para o problema, mas sim, à solução
