Jump to content
Aureo Almeida

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites

@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

 

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.

 

Share this post


Link to post
Share on other sites

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>
				";
            	}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By juniorerb21
      Tenho um site em php e quero alterar o cabeçalho e os icones do cabeçalho, e não sei muito de programação, sei o básico, não consegui alterar, quem poder me ajudar vai ser de grande ajuda!

    • By Yiuky
      Olá tenho esse código abaixo e a parte em vermelho é um HTML carregado pelo meu Arduíno, e como podem ver, ao clicar no botão LIGAR/DESLIGAR é enviado um retorno pelo <a href> porém eu gostaria de saber como posso apenas coletar esse retorno /L OU /H e carregar a pagina index / (barra vazia)? Ou se posso clicar no LIGAR/DESLIGAR e adicionar algo para que a pagina "atualize" ou vá para a /?
       
      // \r\n no final de todos os códigos AT para pular linhas e reconhecer comando
      #include "SDHT.h"
      #include "WiFiEsp.h" //INCLUSÃO DA BIBLIOTECA
      #include <SoftwareSerial.h>
      //Pino do Tx no 6, pino Rx no 7
      SoftwareSerial esp8266(6, 7);
      SDHT dht;
      char ssid[] = "2.4_GAMBATESHIMA"; //VARIÁVEL QUE ARMAZENA O NOME DA REDE SEM FIO
      char pass[] = "FACA2010";//VARIÁVEL QUE ARMAZENA A SENHA DA REDE SEM FIO
      //char ssid[] = "Ali"; //VARIÁVEL QUE ARMAZENA O NOME DA REDE SEM FIO
      //char pass[] = "01010101";//VARIÁVEL QUE ARMAZENA A SENHA DA REDE SEM FIO
      WiFiEspServer server(81); //CONEXÃO REALIZADA NA PORTA 80
      RingBuffer buf(8); //BUFFER PARA AUMENTAR A VELOCIDADE E REDUZIR A ALOCAÇÃO DE MEMÓRIA
      #define DEBUG true
        int statusLed = LOW; //VARIÁVEL QUE ARMAZENA O ESTADO ATUAL DO LED (LIGADO / DESLIGADO)
        String temperatura;
        String umidade;
        
        int status = WL_IDLE_STATUS;
        
      void lerTempUmi(){
        dht.broadcast(DHT11, A1);
        delay(500);
        temperatura = String (dht.celsius, 0);
        umidade = String (dht.humidity, 0);
         }
        
      void setup() 
      {
          Serial.begin(9600);
          esp8266.begin(9600);
          WiFi.init(&esp8266);   // initialize ESP module
          pinMode(12, OUTPUT);
          digitalWrite(12, statusLed);
        if (WiFi.status() == WL_NO_SHIELD)  // check for the presence of the shield 
        {
          Serial.println("WiFi shield not present");
          // don't continue
          while (true);
        }
        // attempt to connect to WiFi network
        while ( status != WL_CONNECTED) {
          Serial.print("Attempting to connect to WPA SSID: ");
          Serial.println(ssid);
          // Connect to WPA/WPA2 network
          status = WiFi.begin(ssid, pass);
        }
        Serial.println("You're connected to the network");
        printWifiStatus();
        
        while ( status != WL_CONNECTED) {
          Serial.print("Attempting to connect to WPA SSID: ");
          WiFi.init(&esp8266);
          WiFi.begin(ssid, pass);
          Serial.println(ssid);
          // Connect to WPA/WPA2 network
          status = WiFi.begin(ssid, pass);
        }
        //sendData("AT+RST\r\n", 2000, DEBUG); // rst
        //sendData("AT+CWMODE=1\r\n",2000, DEBUG); 
        //sendData("AT+CWJAP=\"2.4_GAMBATESHIMA\",\"FACA2010\"\r\n", 5000, DEBUG);
            
        //sendData("AT+CIFSR\r\n", 2000, DEBUG);//You will get the IP Address of the ESP8266 from this command. 
        //sendData("AT+CIPMUX=1\r\n", 2000, DEBUG);
        //sendData("AT+CIPSERVER=1,80\r\n", 2000, DEBUG);
        //sendData("AT+CIPSTART=0,\"TCP\",\"192.168.0.120\",37777\r\n",1000, DEBUG);                          // escolhe entre conexao TCP ou UDP 
        //delay(1000); 
        //sendData("AT+CWDHCP=1,0\r\n",1000, DEBUG);                                                        // configura ESP8266 para receber um IP do roteador conectado
        //delay(1000);
        //sendData("AT+CIPSTA_DEF=\"192.168.2.5\",\"192.168.2.1\",\"255.255.255.0\"\r\n",1000, DEBUG);      // configura novo IP a ser escolhido - IP fixo, IP do roteador, Mascara da Rede (lembrando que o IP a ser escolhido deve estar na mesma faixa do roteador);
        //delay(1000);   
        //sendData("AT+CIFSR\r\n", 1000, DEBUG);                                                              // Mostra o endereco IP
        //delay(3000);
        
        // Configura para multiplas conexoes
        //sendData("AT+CIPMUX=1\r\n", 1000, DEBUG);                                                           // Abre multiplas conexoes
        //delay(2000);
        //sendData("AT+CIPSERVER=1,80\r\n", 1000, DEBUG);
        delay(1000);
        server.begin();
        
      }
      void loop() 
      {
             WiFiEspClient client = server.available(); //ATENDE AS SOLICITAÇÕES DO CLIENTE
            if (client) { //SE CLIENTE TENTAR SE CONECTAR, FAZ
            buf.init(); //INICIALIZA O BUFFER
            boolean currentLineIsBlank = true;
            while (client.connected()){ //ENQU
            if(client.available()){ //SE EXISTIR REQUISIÇÃO DO CLIENTE, FAZ
              char c = client.read(); //LÊ A REQUISIÇÃO DO CLIENTE
              buf.push(c); //BUFFER ARMAZENA A REQUISIÇÃO
               //IDENTIFICA O FIM DA REQUISIÇÃO HTTP E ENVIA UMA RESPOSTA
              if(buf.endsWith("\r\n\r\n") && currentLineIsBlank) {
       //         lerTempUmi();
                WebPage2(client);
                break;
              }else if(buf.endsWith("GET /H")){ //SE O PARÂMETRO DA REQUISIÇÃO VINDO POR GET FOR IGUAL A "H", FAZ 
                  digitalWrite(12, HIGH); //ACENDE O LED
                  statusLed = HIGH; //VARIÁVEL RECEBE VALOR 0(SIGNIFICA QUE O LED ESTÁ APAGADO)
              }else if (buf.endsWith("GET /L")) { //SE O PARÂMETRO DA REQUISIÇÃO VINDO POR GET FOR IGUAL A "L", FAZ
                        digitalWrite(12, LOW); //APAGA O LED
                        statusLed = LOW; //VARIÁVEL RECEBE VALOR 0(SIGNIFICA QUE O LED ESTÁ APAGADO)
                   }
                   }
                   
                   }
                   delay(10);
            client.stop();
      //sendData("AT+CIPCLOSE=0\r\n", 1000, DEBUG);
                    }
      if (status != WL_CONNECTED) {
        setup();}
      }
      void WebPage2(WiFiEspClient client){
        client.print(
          "HTTP/1.1 200 OK\r\n"
          "Content-Type: text/html\r\n"
       //   "Connection: close\r\n"  // the connection will be closed after completion of the response
          "\r\n");
        client.println("");
        client.println(F("<!DOCTYPE HTML>")); //INFORMA AO NAVEGADOR A ESPECIFICAÇÃO DO HTML
        client.println(F("<html><head><meta charset=\"utf-8\">")); //ABRE A TAG "html"
        client.println(F("<link rel='stylesheet' type='text/css' href='http://blogmasterwalkershop.com.br/arquivos/artigos/sub_wifi/webpagecss.css' />\n"
        "<link rel=\"icon\" type=\"image/png\" href=\"webserver\" src=\"https://tse3.mm.bing.net/th?id=OIP.iEsBOeq78HtIighYnuVMRAHaHa&amp;pid=Api&amp;P=0&amp;w=300&amp;h=300.png\">\n"
      "  <title>GAMBATESHIMA ARDUINO WORK</title>"));
        
        //AS LINHAS ABAIXO CRIAM A PÁGINA HTML
        client.println(F("<body class=\"htmlNoPages\">\n"
      "  <img alt=\"webserver\" src=\"https://tse3.mm.bing.net/th?id=OIP.iEsBOeq78HtIighYnuVMRAHaHa&amp;pid=Api&amp;P=0&amp;w=300&amp;h=300.png\" style=\"width: 150px; height: 150px; margin-top: 50px;\">\n"
      "  <p style=\"line-height: 2;\" class=\"gwd-p-pzi3\"><font>WEBSERVER GAMBATESHIMA</font></p><p>ESTADO ATUAL DO LED: \n"));
          if (statusLed == HIGH) {
      client.println(F(" <strong><font color=\"green\">LIGADO</font></strong></p>\n"
            "<a href=\"/L\" style=\"margin-bottom:50px;\">DESLIGAR</a>\n"));
          }else {
            if (statusLed == LOW) {
      client.println(F(" <strong><font color=\"red\">DESLIGADO</font></strong></p>\n"
            "<a href=\"/H\" style=\"margin-bottom:50px;\">ACENDER</a>\n"));
          }}
                lerTempUmi();
      client.println(F( 
      "  <hr width=\"250\">\n"
      "  <p style=\"line-height: 0;\"><font color=\"red\">TEMPERATURA: </font>"));
      client.print(temperatura);
      client.println(F(" ºC</p>\n <hr width=\"250\">\n"
      "  <p style=\"line-height: 0;\"><font color=\"red\">UMIDADE: </font>"));
      client.print(umidade);
      client.println(F(" %</p>\n <hr width=\"250\">\n"
      "<a href=\"/\">ATUALIZAR</a>\n"
      "</body>\n"
      "</html>
    • By proflupin
      Utilizo o computador de casa e também utilizo o computador do escritório. Muitas vezes faço alterações nos meus arquivos de desenvolvimento no de casa e depois fico querendo utilizá-los no do escritório.
       
      Tentei fazer este controle através do OneDrive, direcionando o Xampp para a pasta do OneDrive, porém não ficou legal, em alguns momentos os arquivos não foram sincronizados corretamente.
       
      Qual a melhor ferramenta para utilizar neste caso?
       
      Aproveitando a pergunta e engatando outra, existe alguma ferramenta ideal para desenvolvimento em grupo?
    • By geivisonsales
      tenho uma DIV que possui um while em php, esse while carrega 12 posts(DIV), e quero que quando acesse o site, a pagina carregue normalmente mas dentro da div aparece um loader e apenas mostre os posts quando todos estiverem carregados! isso é possivel?
    • By tiicaa
      Pessoal, preciso replicar o fundo (piso) em uma aplicação web. Acontece que eu consigo replicar uma parede enviando uma "tira" de imagem e via css repetir em X porém para o chão gostaira de utilizar perspectiva no piso de madeira como nessa imagem - https://i.imgur.com/BwzVfQo.png
      Porém na minha aplicação o usuário escolhe o tamanho do container, se ele quiser criar um corredor infinito ele pode inserir o tamanho que quiser, porém eu preciso que o background se repit. 
       
      A dúvida é....
      É possível replicar background em perspectiva? Se sim, como possso fazer? 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.