How to put images on a 3 by 3 table?

Question

Hi,

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>

Answer 2

Use a counter to keep track of how many images you've displayed already, and only emit </tr><tr> every 3 images. Hint: $count % 3

Answer 3

You don't really need to do this with tables (think about it, you're just trying to display something in a grid, you're not really trying to create a table of things).

With a little CSS you can do it like this (you can use the appropriate HTML5 elements if you use html5-shiv for MSIE):

<div class="figure">
<img src="mypic.jpg" alt="">
<div class="description">Description goes here</div>
</div>

and in CSS:

.figure {
float: left;
margin-right: 10px; /* for space between the columns */
padding: 5px;
border: 1px solid #000;
background-color: #fff;
color: #000;
}
.figure .description {
margin-top: 1em;
font-variant: italic;
}

If they are all the same size and you want to force them into a NxN grid, you can wrap them in a div (class="grid") do something like this (3x3 grid, 100px inner figure width (i.e. 90px image width)):

.grid {
padding-left: 10px; /* to mirror the right margin of the last .figure in the row */
width: 350px; /* 3*100px + 2*10px margin + 3*2*5px padding */
}
.figure img {
width: 90px;
}

This way you can simply output the images in sequence in a loop without having to worry about where to wrap the rows (the wrapping is handled by CSS; if you don't force the grid to have a maximum width, it will wrap at the right end of the browser window).