Publicado em 14 de jul.

Problema em definir largura e disposição horizontal de tabelas com resultado de while

Como iniciante em programação estou tendo problemas para estilizar uma tabela dentro de um script PHP. Possuo o seguinte script:

 <?php
 $sql = 'SELECT * FROM psd_produtos';
 $stmt = $conn->query($sql);
 echo '<table>';
 while($row = $stmt->fetch(PDO::FETCH_OBJ)){
 echo "
 <td>
 <tr><h1>$row->prd_nome <br /></h1></tr>
 <tr><p>$row->prd_detalhe <br /></p></tr>
 <tr>$row->prd_valor <br /></tr>
 </td>
 ";
 }
 echo '</table>';
 ?>

	Ele funciona perfeitamente, buscando e produzindo um loop das informações que preciso, porém, gostaria que o resultado me retornasse em tabelas que ficasse dispostas horizontalmente lado a lado, e imaginei colocar uma classe CSS que estabelecesse a largura da tabela em 400px com um float que me permitiria alinhar o resultado em “4 colunas”. Porém, essa classe não funciona dentro do script.

	Tentei echo '<table class="tabela-produto">'; e não funciona.

	A mesma classe, que estabelece uma largura para a tabela, aplicada a uma tabela fora do script funciona e isso tirou minha dúvida se este tópico seria sobre CSS/HTML ou PHP.

	Como posso fazer para obter meu objetivo com este script, alinhando horizontalmente o resultado do while em tabelas dispostas horizontalmente em 4 colunas?

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

gabrielms· 14 de jul.

@Aureo Almeida Bom dia,!

Cara, seu problema está no seu HTML e no CSS.

	Tem um erro no HTML no elemento table, você colocou um elemento cell(<td>) antes de um elemento row(<tr>), e dentro do elemento cell(<td>), você colocou 3 elementos row(<tr>), e isso está totalmente errado.

	 

	Uma tabela simples no HTML ficaria assim:

<table>
 <tr>
 <td>Cell A</td>
 <td>Cell B</td>
 </tr>
</table>

	Como você não colocou seu CSS não tem como verificar se tem alguma coisa errada no css.

	 

	[Aqui tem a documentação da tabela do HTML](https://www.w3schools.com/html/html_tables.asp)

	 

	Vou deixa um exemplo de 3 tabelas alinhadas horizontalmente usando HTML e CSS, e colocando os elementos da tabela usando um echo do php.

<?php

$num = -1;

$resultato = [

 array("id"=>1, "name"=>"teste01", "valor"=>200),
 array("id"=>2, "name"=>"teste02", "valor"=>400),
 array("id"=>3, "name"=>"teste03", "valor"=>600),
 array("id"=>4, "name"=>"teste04", "valor"=>800),
 array("id"=>5, "name"=>"teste05", "valor"=>1000)
];

function emularDb()

{

 global $num, $resultato;

 if ($num < (count($resultato) - 1))
 {
 $num++;
 return(true);
 }else
 {
 return(false);
 }
}

?>

<!DOCTYPE html>

<html>
 <head>
 <title>Tabela</title>
 <style>

 html, body{
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 }

 .contaier{
 width: 100%;
 padding: 0px;
 margin: 0px;
 }

 table.table-cotanier{
 width: 400px;
 float: left;
 margin: 5px;
 border: #272727 1px solid;
 }

 table.table-cotanier > tbody:first-child > tr > th{
 background: #272727!important;
 padding: 5px 10px;
 color: #fff;
 width: 100%;
 }

 table.table-cotanier > tbody > tr > td{
 padding: 5px 10px;
 color: #000;
 width: 100%;
 border-bottom: 1px solid #ccc;
 }

 </style>
 </head>
 <body>
 <div class="container">
 <table class="table-cotanier">
 <tbody>
 <tr>
 <th>ID</th>
 <th>NOME</th>
 <th>VALOR</th>
 </tr>
 </tbody>
 <tbody>
 <?php
 while(emularDb())
 {
 echo("<tr>");
 echo('<td>'.$resultato[$num]['id'].'</td>');
 echo('<td>'.$resultato[$num]['name'].'</td>');
 echo('<td>'.$resultato[$num]['valor'].'</td>');
 echo("</tr>");
 }
 ?>
 </tbody>
 </table>
 <table class="table-cotanier">
 <tbody>
 <tr>
 <th>ID</th>
 <th>NOME</th>
 <th>VALOR</th>
 </tr>
 </tbody>
 <tbody>
 <?php

 $num = -1;

 while(emularDb())
 {
 echo("<tr>");
 echo('<td>'.$resultato[$num]['id'].'</td>');
 echo('<td>'.$resultato[$num]['name'].'</td>');
 echo('<td>'.$resultato[$num]['valor'].'</td>');
 echo("</tr>");
 }
 ?>
 </tbody>
 </table>
 <table class="table-cotanier">
 <tbody>
 <tr>
 <th>ID</th>
 <th>NOME</th>
 <th>VALOR</th>
 </tr>
 </tbody>
 <tbody>
 <?php

 $num = -1;

 while(emularDb())
 {
 echo("<tr>");
 echo('<td>'.$resultato[$num]['id'].'</td>');
 echo('<td>'.$resultato[$num]['name'].'</td>');
 echo('<td>'.$resultato[$num]['valor'].'</td>');
 echo("</tr>");
 }
 ?>
 </tbody>
 </table>
 </div>
 </body>
</html>

	Obs..: Muito web design não gosta do resultado da tabela do html quando o site é responsivo, pro isso muitos optam por usar flex-box ou css grid em um elemento div para fazer a tabela.

Aureo Almeida· 16 de jul.

Oi Pessoal. Quero dizer que eu consegui resolver o problema que postei aqui com o seguinte código, adicionando ao echo que insere a tabela uma div no entorno:

while($row = $stmt->fetch(PDO::FETCH_OBJ)){
 $imagem = $caminho . $row->prd_foto1;
 echo"
 <div class='tabela-produtos'>
 <table border='0' cellspacing='5px'>
 <tbody>
 <tr class='tabela-produtos-td1'>
 <td><img src='$imagem'/></td>
 </tr>
 <tr class='tabela-produtos-td2'>
 <td><br/><br/><h1>$row->prd_nome</h1><br/></td>
 </tr>
 <tr class='tabela-produtos-td3'>
 <td><h2>R$$valor</h2><br/></td>
 </tr>
 <tr class='tabela-produtos-td4'>
 <td><p>$row->prd_detalhe</p><br/></td>
 </tr>
 <tr class='tabela-produtos-td5'>
 <td>
 <form>
 <input name='COMPRAR' type='button' class='align-center' id='COMPRAR' value='Ver Detalhes'>
 </form></td>
 </tr>
 </tbody>
 </table>
 </div>
 ";
 }