如何将 HTML 表格变成网格？

Question

I'm retrieving data from my database into a table, but the data is piling up to the left rather than a grid view.

    include_once ('includes/db_connect.php');
    $res = mysql_query("SELECT * FROM inventory ORDER BY id DESC");

    echo "<table>";
    while ($row = mysql_fetch_array($res)) {
        echo "<tr>"; echo "<td>";?> <img src="<?php echo $row["image"]; ?>" height="200" width="280">  <?php echo "</tr>";
        echo "<tr>"; echo "<td>"; echo $row['make']; echo "&nbsp; "; echo $row['model']; echo "</td>";  echo "</tr>";
    }
    echo "</table>";

Any help will be highly appreciated.

Answer 1

You just need closing /td tags for every opening td tag. Your first line is missing a /td:

echo "<tr>"; echo "<td>";?> <img src="<?php echo $row["image"]; ?>" height="200" width="280">  <?php echo "</td></tr>";

echo "<tr>"; echo "<td>"; echo $row['make']; echo "&nbsp; "; echo $row['model']; echo "</td></tr>";

You probably also want to style your table with this inside the head tags:

<style>
table {
    border:1px solid black;
    border-collapse:collapse;
}
</style>

Or inline styles:

<table style="border:1px solid black; border-collapse:collapse;">

Answer 2

In your code, the end of the first line closes off the table row without actually closing off the cell. I have also spaced out your code as to improve readability. I believe the issue was the missing </td> at the end of the first row.

$res = mysql_query("SELECT * FROM inventory ORDER BY id DESC");

echo "<table>";

while ($row = mysql_fetch_array($res)) {
    ?>
    <tr><td>
    <img src="<?php echo $row["image"]; ?>" height="200" width="280">
    </td></tr>
    <tr><td>
    <?php echo $row['make']; echo "&nbsp; "; echo $row['model'];?>
    </td></tr>
    <?php
}
echo "</table>";

It also should be noted that your mysql_query should be switched over to mysqli or pdo.