How do I place images side-by-side with captions underneath? - html

Question

How do I place images side-by-side with captions underneath? I'm currently using a table to accomplish this effect and it looks like this:
<table align="center">
<tr>
<td>
<img style="width: 200px; height: 275px" src="image"/>
<br/>title
</td>
<td>
<img style="width: 200px; height: 275px" src="image"/>
<br/>title
</td>
</tr>
</table>
I was wondering if there was a better way to do this without using tables.

Answer 1

Use HTML5 Tags
CSS
figure{
display: inline-block;
}
HTML
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
figure{
display: inline-block;
}
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>
<figure>
<img src='image.jpg' alt='missing' />
<figcaption>Caption goes here</figcaption>
</figure>

Answer 2

You can use divs to do this.
something simple like:
<ul>
<li class="container">
<img class="image" src="#"/>
<span class="caption">my caption</span>
</li>
<li class="container">
<img class="image" src="#"/>
<span class="caption">my caption</span>
</li>
</ul>
then you're looking at
.container {
float: left;
}
.image {
display: block
}
.caption {
display: block;
width: 100%;
text-align: center; //assuming centered captions
}
you might need a clearfix for the outer UL element (if you want to use a list to represent a list of images). Not sure but there's also the figure/figcaption route as well, but this would be fine if you weren't considering html5 elements.
As briefly mentioned, I suggest a UL/OL in this case because semantically it's probably a list of images. Even if you went the route with figures I would say to put the figures in each list item.