How do I create a table there cells flow/wrap rather than using a rigid grid?

Question

I'm having trouble creating the layout I would like for a website. I don't have too much experience with web design and the only software I have is FrontPage which doesn't seem to do what I want.

I'm trying to create a page with a number of "cells," each containing an image on top with text centered below. I want each cell to have a fixed width and I'd like to have the cells follow a normal "flow," placed besides each other (for example, as inline images would), and have these cells wrap if there isn't enough width to fit them all on one line (again, as inline images would).

The first thing that comes to mind is a table, but a table has a rigid structure of rows and columns rather than flowing and wrapping.

Answer 1

HTML:

<div class="cell"><img src="img1.png" ...><br>Capture 1</div>
<div class="cell"><img src="img2.png" ...><br>Capture 2</div>
<div class="cell"><img src="img3.png" ...><br>Capture 3</div>
<!-- and so on -->

CSS:

.cell {text-align:center;
       width:200px; /* or whatever you want */
       float:left;
       /* add margin, padding, border style if you wish */
}

See demo.

Answer 2

I think the customary approach to achieve this look, at this point in history, is a ul (unordered list). Take a look at the demos for the Galleria Plugin. Each of these has a group of thumbnails that render almost exactly as you describe (you'll have to add text below).