What ways can I put images in a grid-like format?

Question

I have about 12-15 images that I want to align together in a grid, with text under each image. I thought about using a table, but I hear that tables aren't the best way to go these days. I tried a few other things, but nothing seemed to work the way I wanted it to.

An example of what I want it to look like would be something like this:

[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] --- Row 1

(--Description-) (-Description-) (-Description-) (-Description-)

[-----Image-----] [-----Image-----] [-----Image-----] [-----Image-----] --- Row 2

(--Description-) (-Description-) (-Description-) (-Description-)

and so on...

What are some other methods, besides tables, that I should look into using? Any suggestions or references would be helpful.

Answer 1

HTML:

<div class="floated_img">
    <img src="img.jpg" alt="Some image">
    <p>Description of above image</p>
</div>
<div class="floated_img">
    <img src="img2.jpg" alt="Another image">
    <p>Description of above image</p>
</div>

CSS:

.floated_img
{
    float: left;
}

You'll probably want some more styles, but that should do basically what you want.