Question

I am using php/mysql, and have a database table with image url. I would like to know how can I put them on a php page with a 3 x 3 table, such that each td will show a different image based on the image url from the database?

I want to create something like this, where the alphabets are the images:

|a|b|c|
|d|e|f|
|g|h|i|

So far, I am only able to use do while to create something like this:

|a| | |
|b| | |
|c| | |

Thanks.

Answer 1

This would be the general approach:

$query = "SELECT url FROM images LIMIT 9";
$resource = mysql_query($query);

# Get the number of images
$count = mysql_num_rows($resource);

$i = 0;
$per_row = 3;

# Start outputting the table
echo '<table><tr>';
while($row = mysql_fetch_assoc($resource)) {
    # The image cell
    echo '<td><img src="'.$row['url'].'" /></td>';
    # If three cells have been printed, and we're not at the last image
    if(++$i % $per_row == 0 && $i > 0 && $i < $count) {
        # Close the row
        echo '</tr><tr>';
    }
}

# If the last row isn't 'full', fill it with empty cells
for($x = 0; $x < $per_row - $i % $per_row; $x++) {
    echo '<td></td>';
}
echo '</tr></table>';

That is, just loop the results normally but on every third item, echo a row change (</tr><tr>). Just make sure that you don’t print extra row changes at the beginning or the end, hence the additional conditions.

The resulting table should be something like this (line breaks added):

<table>
    <tr>
        <td><img src="image.jpg1" /></td>
        <td><img src="image.jpg2" /></td>
        <td><img src="image.jpg3" /></td>
    </tr>
    <tr>
        <td><img src="image.jpg4" /></td>
        <td><img src="image.jpg5" /></td>
        <td><img src="image.jpg6" /></td>
    </tr>
    <tr>
        <td><img src="image.jpg7" /></td>
        <td><img src="image.jpg8" /></td>
        <td><img src="image.jpg9" /></td>
    </tr>
</table>