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 t

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.

Answer 2

Since you said grid that means that the height and width will be fixed.

An inline-block might work very well for you. I find they are a little easier to work with than floats. And, inline-blocks respect the inherited align property(so you could have them centered)

CSS

.grid_element {
  display: inline-block;
  width: 200px;
  height:200px;
  zoom: 1;         /* for IE */
  display*:inline; /* for IE */
}

However, inline-block elements might not work so well on older browsers.

Some Reading:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
http://www.brunildo.org/test/InlineBlockLayout.html