PHP shopping cart, getting products from database, sort CSS styling it

Question

I am trying to sort out my products that I retrieved using php code shown below from my products database, the problem I have is the products are listed one by one vertically, I want them to show them next to each other eg 4 products horizontally and the their prices, description underneath it, I did try to style it using CSS by giving class ids however I am unable to sort it out, I also searched on here but no luck. any help would be much appreciated

    <?php
      $con = mysqli_connect("localhost", "root", "pass", "sharifstores");

      $result = mysqli_query($con, "SELECT * FROM tblProduct");
      echo "<br>";
      echo "<table>";

      while ($row = mysqli_fetch_array($result)) {
        $pname = $row[1];
        $image = $row[2];
        $description=$row[3];
        $price = $row[4];
        echo "<tr><td>$pname</td>";
        echo "<td><img src=\"$image\" width=\"200\" height=\"180\" />    </td>";
        echo "<tr><td>$description</td>";
        echo "<tr><td>$price</td>";
        echo "<td><form action=\"basket.php\" method=\"POST\">"
        . "<input type=\"submit\" name=\"$pname\" value=\"Add $pname to Basket\" />"
        . "</form></td></tr>";

        }
       echo "</table>";
       mysqli_close($con);
    ?>

Answer 1

You could do something like this: loop through the rows first to get all of you data. Then loop again to show them.

$products = array();
$i = 0;
while ($row = mysqli_fetch_array($result)) {
    $product = new stdClass();
    $product->name = $row[1];
    $product->description = $row[2];
    $product->price = $row[3];
    $product->price = $row[4];

    $products[$i++] = $product;
}

echo "<tr>";
foreach($products as $product){
    echo "<td>
        $product->name
    </td>";
}
echo "</tr>";

You could basically do it for every product feature. Kind of lame, but it works.

Answer 2

TRY THIS

<?php
      $con = mysqli_connect("localhost", "root", "pass", "sharifstores");

      $result = mysqli_query($con, "SELECT * FROM tblProduct");
      echo "<br>";
      echo "<table>";

      while ($row = mysqli_fetch_array($result)) {
        $pname = $row[1];
        $image = $row[2];
        $description=$row[3];
        $price = $row[4];
        echo '<div style="float:left; width:23%;margin:5px;">';
        echo "<tr><td>$pname</td>";
        echo "<td><img src=\"$image\" width=\"200\" height=\"180\" />    </td>";
        echo "<tr><td>$description</td>";
        echo "<tr><td>$price</td>";
        echo "<td><form action=\"basket.php\" method=\"POST\">"
        . "<input type=\"submit\" name=\"$pname\" value=\"Add $pname to Basket\" />"
        . "</form></td></tr>";
        echo "</div>";

        }
       echo "</table>";
       mysqli_close($con);
    ?>

      <div style="clear:both;"></div>

HERE IS ANOTHER WAY:

<br/>
<table>
<?php
      $con = mysqli_connect("localhost", "root", "pass", "sharifstores");
      $result = mysqli_query($con, "SELECT * FROM tblProduct");

      while ($row = mysqli_fetch_array($result)) {
        $pname[] = $row[1];
        $image[] = $row[2];
        $description[] = $row[3];
        $price[] = $row[4];
    }

    foreach($pname as $key => $name) { ?>
        <div style="float:left; width:23%;margin:5px;">
            <tr>
                <td><?php echo $name; ?></td>
                <td><img src="<?php echo $image[$key]; ?>" width="200" height="180" /></td>
                <tr><td><?php echo $description[$key]; ?></td>
                <tr><td><?php echo $price[$key]; ?></td>
                <td>
                <form action="basket.php" method="POST">
                    <input type="submit" name="<?php echo $name; ?>" value="Add <?php echo $name; ?> to Basket" />
                </form>
                </td>
            </tr>
        </div>
    <?php  } mysqli_close($con); ?>
</table>
<div style="clear:both;"></div>