How to Make an HTML Image Table in Blogger and Wordpress

Have you ever wondered how to make a table full of linked images (like the ones you can see on my tutorials page)? It’s a handy little piece of HTML that I’ve learned, and it will work in both Blogger and Wordpress. And it’s not hard to do, I promise! So keep reading, today I’m going to show you how to make an HTML image table in both Blogger and Wordpress.

BIG DISCLAIMER ON THIS TUTORIAL: I am not a web expert, I won’t rewrite your code for you, and I take no responsibility if you waste a lot of time and/or totally mess up a page using these instructions. This method works for me, but I’m sure there are other (perhaps even better) ways to do this.

To make an HTML image table, you’ll need to know just a couple of things about HTML.

<> These enclose a tag, which you can think of as one command or bit of information you’re giving about how you want your page to look. At the end of each command, you use the same tag with </>

<table> and </table> designate your table on the page

<tbody> and </tbody> enclose the body of your table

<a href=> and </a> enclose your links

<tr> and </tr> enclose each table row

<td> and </td> enclose each piece of table data, in this case one picture and the link

Blogger Instructions (Scroll down for Wordpress Instructions)

Step 1: Open a new page or post, whichever you’re using. Insert all the pictures you want in your table, in the order you want them, and resized to the size you want them. They’ll all be in a long line down the page at this step. Make sure to hit enter in between each picture so they’ll have space between them – this will make it easier to see what’s what when you go over to HTML.

Step 2:  Next, click on each picture to highlight, then click link. Leave “Text to Display” blank, and copy and paste the page you want this picture to link to in the “Web Address” box.  Repeat this for each picture.

We’ll continue the Blogger Instructions after the Wordpress Step 1 & 2 Instructions. Scroll down to Step 3. 

Instructions for Wordpress

Step 1&2 (Wordpress can do in one window what Blogger does in 2 steps): Open your new post/page. Click the Add Media button to upload your pictures. In the pop up window you’ll be able to change both the link and the size of the image. To change the link, select “Custom URL” from the drop-down and then paste your page link in the box below. Select your image size from the dropdown. Do this for all the pictures you want to use in the table. Then Command+Click (Mac) or Control+Click (PC) each picture in the order you want them to appear in the table. Click “Insert into post”

Step 3- Blogger: Now click on your HTML tab. You’ll see a bunch of stuff that looks like this. See the spaces below? Those are dividing my pictures. Depending on how you have your options for posts set up, you might also see tags that looks like this <br></br> where you added the spaces. That’s fine too.

Step 3 – Wordpress: Now click on your Text tab. You’ll see a bunch of stuff that looks like this. Look for the <p></p> tags – these indicate the pictures you’ve put in. For ease of editing for yourself, I would add an extra space between each one by hitting enter a couple of times after each </p>

STEP 4 – Blogger AND Wordpress Scroll to the very top of your post, and type <table><tbody><tr><td> Then scroll all the way to the end and type </td></tr></tbody></table> You close your tags in reverse order of the way you typed them to begin with, or from inside to outside. This will start your table setup.

VERY IMPORTANT: Resist the urge to click back to Compose or Visual mode to see what you’ve done until you are finished editing the HTML. If you click over mid-process, you’ll just mess stuff up and create more work for yourself.

Next you are going to create your table rows.

Step 5- Blogger only: You’ll notice that each picture+link you created earlier starts with the tag <div> and ends with </div> You’re going to want 3-4 pictures per row. You already started the first row in the step above. Count down 3 or 4 pictures in your HTML, and after the 3rd (or 4th) </div> tag add </tr><tr> to close one row and begin another.

ANOTHER IMPORTANT POINT: You might see extra <div></div> tags with nothing in between them. Those are your spaces between pictures. You can delete these as you go (see mine below). If you don’t have these, this is where you will see the <br></br> tags. You can delete those too.

Step 5 – Wordpress only: Remember, each picture+link you created earlier starts with the tag <p> and ends with </p> You’re going to want 3-4 pictures per row. You already started the first row in the step above. Count down 3 or 4 pictures in your HTML, and after the 3rd (or 4th) </p> tag add </tr><tr> to close one row and begin another.

Step 6 – Blogger AND Wordpress: Almost done. Now all you have to do is define your table data. Go back to the top, and after the first picture+link </div>  or </p> tag, add </td> Before the next <div> or <p> tag, add <td>. In many places you’ll be able to add </td><td> all at once, but sometimes you’ll have your table row tags from step 5 in the way. When you hit the ends of the table rows, the HTML should look like this: </div></td></tr><tr><td><div> in Blogger and like this:</p></td></tr><tr><td><p> in Wordpress

So, after each picture+link is enclosed within <td></td> tags, you are done! You can see what the first row of my table looks like in Blogger in the highlighted HTML below.

And in Wordpress it looks like this:

And now you can finally click the compose tab to go over and check your work in Blogger, which will look like this:

And in Wordpress you can click the Visual tab to see your table, which will look like this:

Another note on Wordpress – after you click over to Visual, if you click back to Text mode you’ll notice your HTML has been reformatted – it’s actually easier to read now, because it will look like this (the highlighted is my first table row again):

One Final Important Note: If you want to add captions to your photos in the table, do this AFTER you’ve created the whole table. You can click on any picture to add the caption. The reason you shouldn’t do it before is because captioning creates a table within a table, which can make your HTML much harder to read because there will be a lot more <table> <tbody> <tr> and <td> tags throughout.