How To: Create a Simple Image Gallery with HTML tables

Sometimes you just want a simple Image Gallery. With no php, javascript or flashy Adobe flash required. Just simple, quick and dirty HTML that you can type out and be done with your post.

What you will need:

  • The images you want to use in their Original format
  • Every image in a thumbnail format (duplicates, preferably in 150x150px)
  • Optional: HTML editor with color coding

Steps:
1. Gather all the images you want to use in your gallery, and create a 150x150px duplicate of each one.
2. Add the prefix “_thumb” or something similar to the 150x150px duplicates.
Example: Kangaroo.jpg (Original) Kangaroo_thumb.jpg (Thumbnail).
3. Upload the images to your host.
4. In the HTML document, start with the <table> tag. Then start a table row with the <tr> tag. And finally add your first cell (Image) with the <td> tag, and end it with </td>.

Example:
<table>
<tr>
<td><a href=”http://example.com/image.jpg” target=”_blank”><img src=”http://example.com/image_thumb.jpg” /></a></td>

5. Keep adding cells and rows to your gallery in a symmetrical pattern. Remember to cut each row with </tr> and the table with </table>

4×4 example:
<table>
<tr>
<td><a href=”http://example.com/image.jpg” target=”_blank”><img src=”http://example.com/image_thumb.jpg” /></a></td>
<td><a href=”http://example.com/image2.jpg” target=”_blank”><img src=”http://example.com/image_thumb2.jpg” /></a></td>
</tr>
<tr>
<td><a href=”http://example.com/image3.jpg” target=”_blank”><img src=”http://example.com/image_thumb3.jpg” /></a></td>
<td><a href=”http://example.com/image4.jpg” target=”_blank”><img src=”http://example.com/image_thumb4.jpg” /></a></td>
</tr>
</table>

2×3 example:
Meerkats At The Zoo Gallery

3×3 example:
Cherry Blossom Gallery

Feedback and questions welcome.

Be Sociable, Share!

    Published by

    admin

    Lovable, friendly and crazy 25-year-old-boy.

    • I really like this method also. It’s simple and logical. I’m considering teaching this method to my beginning web design class. I realize that there are other methods such as divs or uls. Does anything think that using tables to layout pictures is antiquated. Like I said, I personally like it, but worry about getting my students off on the wrong track.

    • I really like this method also. It’s simple and logical. I’m considering teaching this method to my beginning web design class. I realize that there are other methods such as divs or uls. Does anything think that using tables to layout pictures is antiquated. Like I said, I personally like it, but worry about getting my students off on the wrong track.

    • I really like this method also. It’s simple and logical. I’m considering teaching this method to my beginning web design class. I realize that there are other methods such as divs or uls. Does anything think that using tables to layout pictures is antiquated. Like I said, I personally like it, but worry about getting my students off on the wrong track.

    • I really like this method also. It’s simple and logical. I’m considering teaching this method to my beginning web design class. I realize that there are other methods such as divs or uls. Does anything think that using tables to layout pictures is antiquated. Like I said, I personally like it, but worry about getting my students off on the wrong track.

    • I really like this method also. It’s simple and logical. I’m considering teaching this method to my beginning web design class. I realize that there are other methods such as divs or uls. Does anything think that using tables to layout pictures is antiquated. Like I said, I personally like it, but worry about getting my students off on the wrong track.

      • peppoj

        Thank you for your comment. I think that you are better of using CSS when doing page layout, and not strictly HTML tables.