Images in a Table

A continuation of A Layout for Images

In these two posts, JPIX and Good Evening New Jersey, I used <table> code to set up a page with many thumbnails. Why did I choose <table> tags? The JPIX post best illustrates the reason; one gets a lot of control over how the images and linked text will appear.

Here’s an example. Let’s say I wanted to post these four autumn thumbnails in one post, and I wanted to put little linked captions under each one:
 
Orangey Tree       Yellowy Tree
 
Buncha Leaves       Tree on Raritan Avenue

Do you see the problem here? Those captions are not lining up neatly under their photos. So I’m going to put each photo with its caption in a cell (the cell tag looks like <td>), and all these cells will be placed in a row (<tr>) in a table. I could create more than one row, but for this example, one row is enough.

If you are really going to attempt this method, I suggest you familiarize yourself with HTML table code. You can start with this table tutorial or read the W3 Consortium page on tables. Also, look at the source code for the posts I mentioned at the start of this post that use tables (in Firefox, one can see source code by selecting View – Page Source).

If I haven’t scared you away yet, here’s how the code will look for a table of three of those thumbnails in a row, with captions under each photo:
<table>
<tr>
<td><a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view&current=fallen_leaves038.jpg”><img src=”https://www.leoraw.com/blog/wp-content/uploads/2008/11/th_fallen_leaves038.jpg” alt=”red tree” title=”th_fallen_leaves038″ width=”160″ height=”120″ class=”alignnone size-medium wp-image-3746″ /></a>
<a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view&current=fallen_leaves038.jpg”>Red Tree on Raritan Avenue</a></td>
<td><a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view&current=autumn018.jpg”><img src=”https://www.leoraw.com/blog/wp-content/uploads/2008/11/th_autumn018.jpg” alt=”yellow leaves” title=”th_autumn018″ width=”160″ height=”120″ class=”alignnone size-medium wp-image-3745″ /></a>
<a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view&current=autumn018.jpg”>Bunch of Yellowy Leaves</a></td>
<td><a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view&current=autumn014.jpg”><img src=”https://www.leoraw.com/blog/wp-content/uploads/2008/11/th_autumn014.jpg” alt=”leaves” title=”th_autumn014″ width=”160″ height=”120″ class=”alignnone size-medium wp-image-3744″ /></a>
<a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view&current=autumn014.jpg”>Red ‘n Yellow Leaves</a>
</td>
</tr>
</table>

And that produces:

Red Tree on Raritan Avenue

Bunch of Yellowy Leaves

Red ‘n Yellow Leaves

Other image layout solutions:

• Flickr Collage Tool (Also works with Photobucket)
• Word Press Image Gallery
• Mosaic Maker (I haven’t use this, but I’ve seen nice results on other blogs)