Php - Arranging Table Horizontally

dxrkraii
May 22, 2023
169 views
0 votes
2 Answers

I have a table in my main website, I want to make it so that when there are three columns, it automatically rearrange the arrangement of the tables after three be arranged to the right. The table on my site basically shows a picture of a laptop and the specs next to it (also in table form). Please help me with the coding as I cant seem to find a solution.

Language: CSS, PHP
Below is the attached picture of my siteenter image description here

I tried to add borders to my table but it doesn’t work for me

This is my code on php

if(mysqli_num_rows($laksana_pilihan)==0){
   # papar Tiada barangan yang telah direkodkan
   echo "Tiada barangan yang telah direkodkan";
}
else{
       
       # jika terdapat barangan yang ditemui
       # papar dalam bentuk jadual.
      echo "<table border=’1’>";
      

# Pembolehubah $n mengambil data yang ditemui
while($n=mysqli_fetch_array($laksana_pilihan)){

       
     
  
       # memaparkan semula data diambil oleh pembolehubah $n
  echo "  <tr> 
                  <td><img width='50%' src='img/".$n['gambar']."'></td>
                  <td>
                      <h3> <b> ".$n['jenama_barang']."</h3> </b><br>
                     
                      <h6>".$n['nama_barang']." <br>
                              ".$n['cpu']."<br>
                              ".$n['gpu']."<br>
                               RM".$n['harga']."</td>
                               </h6></tr>"; 
                    }
                    echo"</table>";
                   
                    }

this is my code on css

body {
  overflow-y: hidden;
  overflow-x: hidden;
  position: absolute;
  width: 1920px;
  height: 1080px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size:100%;
  background-image: url('https://media.discordapp.net/attachments/962410626284683336/1107323813110222958/L_Daniel-02.png');
  margin:0;
}

h1 {
  text-align: center;
  text-decoration: dotted;
  background-blend-mode: normal;
  color: rgb(255, 255, 255);
font-family: 'Oswald', sans-serif;
font-size: xx-large;

}
/*td and tr is for the table*/
table{
  text-align: center;
  position: absolute;
  left:10%;
  top:19%;
  width: 25%;
  
}

Tags: css php

Answers

THIS SHOULD PROBABLY WORK, IT CREATES A SEPERATE TABLE FOR EVERY 3 ROWS. THEN YOU CAN USE CSS TO HORIZINTALLY ARRANGE THE TABLES

$a = 0;
while($n=mysqli_fetch_array($laksana_pilihan)){

       

if(($a / 3) <= 1){


       # memaparkan semula data diambil oleh pembolehubah $n
  echo "  <tr> 
                  <td><img width='50%' src='img/".$n['gambar']."'></td>
                  <td>
                      <h3> <b> ".$n['jenama_barang']."</h3> </b><br>
                     
                      <h6>".$n['nama_barang']." <br>
                              ".$n['cpu']."<br>
                              ".$n['gpu']."<br>
                               RM".$n['harga']."</td>
                               </h6></tr>"; 
                   
                   
                    $a++;


} else {
// if the row is 4th or 5th or whatever greater than 3rd, close the table and create a new table


if(($a % 3) == 1){
//if it is 4th, 7th, or any new now row after 3 rows, close the table and create new one
echo "</table> <table>";
}


echo "  <tr> 
                  <td><img width='50%' src='img/".$n['gambar']."'></td>
                  <td>
                      <h3> <b> ".$n['jenama_barang']."</h3> </b><br>
                     
                      <h6>".$n['nama_barang']." <br>
                              ".$n['cpu']."<br>
                              ".$n['gpu']."<br>
                               RM".$n['harga']."</td>
                               </h6></tr>"; 



$a++;
}


}
  
      echo"</table>";

My frontend dev skills are poor, at best, but hopefully this gets you heading in a better direction.

As this is a list of products, I would suggest <ul>, instead of <table>. And, we can use <article> for the product cards, as per MDN’s reference for <article>:

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Your PHP would become something like:

if (mysqli_num_rows($laksana_pilihan) == 0) {

    # papar Tiada barangan yang telah direkodkan
    echo "Tiada barangan yang telah direkodkan";

} else {

    echo '<ul class="grid">';

    while ($n = mysqli_fetch_array($laksana_pilihan)) {
  
        echo <<<HTML

            <li>
                <article>
                    <figure>
                        <img src="img/{$n['gambar']}" alt=""/>
                    </figure>
                    <div>
                        <h3>{$n['jenama_barang']}</h3>
                        <p>{$n['nama_barang']}<br>
                           {$n['cpu']}<br>
                           {$n['gpu']}<br>
                           RM{$n['harga']}
                        </p>
                    </div>
                </article>
            </li>

HTML;

    }

    echo '</ul>';
}

Now we can define the <ul> as a grid container, and make the grid three columns of equal width with grid-template-columns:

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Here’s a little more CSS to get you started with the product cards:

.grid {
    margin: 2rem;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
}

.grid li {
    border: 1px solid #eee;
    height: 100%;
}

article {
    display: flex;
    flex-direction: row;
    margin: 1rem;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Php – Arranging Table Horizontally

Answers