随机图像的3x3表 - PHP

enter image description hereI'm new here and need some help. I'm doing a web development course and have an assignment I need a hand with.

Basically, I want to send a query that picks 9 random records, and show the result as a 3x3 table.

Here's my code so far:

<div id="productgrid">
<?php
$query = mysqli_query($conn, "SELECT * FROM products
    ORDER BY RAND()
    LIMIT 9");
?>
<h2>Featured Products</h2>


<table>
    <?php
    while($products = mysqli_fetch_array($query)){
    $file = $products['prod_img'];
    $pid = $products['prod_id'];
    $product_price = $products['prod_price'];
    $image_id = $products['prod_id'];
    $desc = $products['prod_desc'];
    ?>
    <tr>
        <div class="bigred">
            <td class="bigred">
                <?php echo '<b>'. "$product_price".'</b>'; ?>
            </td>
        </div>
    </tr>
    <tr>
        <td>
            <img src="<?php echo $file ?>" height = "150px"     width="150px"/><br />
        </td>
        <div class="smallblack"
    </tr>
    <tr>
        <td class = "smallblack">
        <?php echo '<b>' . "$desc".'</b>'; ?>
        </td>
    </tr>
</div>
<?php } ?>

I can get it to generate the 9 random images but it puts them all directly under each other in one long column. Is there a way I can get them to display in 3 rows of 3?

I apologise if this is a dumb question, but I'm only starting out and appreciate the help.

Thank you :)

Pic attached as sample

<?php
// A counter which is incremented by one for each product row
// in the loop below.
$i = 0;

echo "<table>
";
echo "<tr>
";

while ($product = mysqli_fetch_array($query)) {
  // Re-open HTML row, if $i is divisible by 3
  if ($i++ % 3 == 0) {
    echo "</tr><tr>
";
  }

  // Escape the `src` attribute value as appropriate, according to the
  // logic of your app. This is just a sample.
  $img_src = htmlspecialchars($product['prod_img']);

  echo <<<HTML
  <td>
    <div><img src="{$img_src}"/></div>
    <div>{$product['prod_desc']}</div>
    <!-- Put the rest of the fields here -->
  </td>
HTML;
}

// Add cells for the rest of the columns (if any)
while ($i++ % 3 != 0) {
  echo "<td></td>
";
}

echo "</tr>
";
echo "</table>
";
?>

P.S.: I recommend using a template engine such as Smarty, or Twig. With the help of a template engine you can make the markup much more readable and maintainable.

You should change your table out put and use 3 <td> tags instead of just the one, like so...

<table>
<tr>
<?php
    $counter = 0; // Needs to be outside of the loop...
    while($products = mysqli_fetch_array($query)){
        $file = $products['prod_img'];
        $pid = $products['prod_id'];
        $product_price = $products['prod_price'];
        $image_id = $products['prod_id'];
        $desc = $products['prod_desc'];
?>

    <td class="bigred">
        <?php echo '<b>'. "$product_price".'</b>'; ?>
        <img src="<?php echo $file ?>" height = "150px"     width="150px"/><br />
        <?php echo '<b>' . "$desc".'</b>'; ?>    
    </td>

<?php 
    // Check to see if you have looped through three times and close the <tr> tag.
    if($counter % 3 === 0) {
        echo '</tr><tr>';
    }
    $counter++ 
?>
</table>

If there is more than 9 images, then it will keep creating table rows and cells and you will need more logic to handle that, however, this should work for 9 images.

A more elegant way to handle this would be to use <div> tags and floats, but since you are already using a table, I formatted it as such.