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
Red Tree on Raritan Avenue
fallen leaves
Bunch of Yellowy Leaves
red and yellow leaves
Red ‘n Yellow Leaves

Other image layout solutions:

6 thoughts on “Images in a Table

  • Thank you Leora. I was getting very frustrated as blogger seems to have many issues, but getting to know something new isn’t easy either. But I have to say that your blog inspired me as you know what you are doing with this stuff. I am kind of dissapointed that I can’t put photos along the side..but there are other advantages and hopefull viewable with all browsers..

  • Michelle, you should be able to put photographs on the side. I have one photograph of me on the side. But get used to the basics of WordPress, first.

    Ilana-Davita, if you can get the previous post, A Layout for Images, you can get pretty far with thumbnails. Using tables makes your code rather messy, even if you are used to tables. But I know them well, so I sometimes use them in blogging to get neat alignments.

  • I’ve never tried putting pictures in a row like that, but if I do then a table sounds like a great idea. The code looks like so much fun to go through.

    It all makes sense. Except what does the alt tag do?

    I think I’m gonna do a post with pictures to see if I can get the table right. Just for fun.

  • Jewish Side aka Babysitter,
    Maybe I’ll explain the “alt” tag in another post. You can always Google it in the meantime (Google “alt HTML”).

Please write a comment! I love to hear from you.

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.