Using Tables to Align Images

uttai

Have you ever visited a blog that had neat rows perfectly aligned images and wondered, how the heck did they DO that?

Every wordpress user knows that when you’re writing a post, you can insert your images in a neat row in the editor, but they almost always come out looking like this:

piribtearibpurrib

When what you wanted was this:

Table 1

pirib tearib purrib

You can even add captions to the images, and they will still be neatly aligned:

Table 2

pirib tearib purrib
Pink Ribbon Teal Ribbon Purple Ribbon

Yeah…yeah… that’s great, but how do I DO it?!

Three HTML tags is all it takes.

‘table’ defines the HTML table
tr‘ defines a table row
td‘ defines a table cell

A table row is filled with tables cells that will contain either text or an image. In Table 1, the HTML I used to create the table looked like this:

<table>
<tr>
<td>INSERT_IMAGE1_URL_HERE</td>
<td>INSERT_IMAGE2_URL_HERE</td>
<td>INSERT_IMAGE3_URL_HERE</td>
</tr>
</tr>
</table>

I pasted this code into the HTML tab of the Post Editor, then returned to the Visual tab.

HTML code MUST always be pasted into the HTML tab of the Post Editor. It will not work if it’s pasted into the Visual tab.

When I returned to the visual editor, the table looked like this:

img_013

I deleted the text from the cells, and inserted a photo into each individual cell. (The default setting for this simple table is for text or photos to be left aligned, so I changed the image alignment to center in each of the cells.)

In Table 2, there are captions under the photos. I did this by adding another table row …

<table>
<tr>
<td>INSERT_IMAGE1_URL_HERE</td>
<td>INSERT_IMAGE2_URL_HERE</td>
<td>INSERT_IMAGE3_URL_HERE</td>
</tr>
<tr>
<td>INSERT_IMAGE_CAPTION_HERE</td>
<td>INSERT_IMAGE_CAPTION_HERE</td>
<td>INSERT_IMAGE_CAPTION_HERE</td>
</tr>
</table>

…which looked like this once I was back in the visual tab of the editor:

img_014

Rather than a photo, I added a caption in each cell of the second row, which resulted in the Table 2 example above.

When adding more rows, remember to ALWAYS close your tags if you type it out, rather than copy and paste. If you look closely at either HTML example, you’ll note that each of the three tags are always used in pairs. For example,  < td > is always followed by < /td >. Tags that are left open will not work properly, so make sure you always close them.

And that’s all there is to it. Feel free to copy and paste the code examples into Notepad on your computer. You never know… it might come in handy one day!

Save

Advertisements

9 thoughts on “Using Tables to Align Images

    1. I have to look up code all the time. I use to know a lot of code by memory when I had a website, but now I can’t remember how to do the simplest things anymore. (Or maybe that’s me getting older and more forgetful? LOL)

      Liked by 1 person

    1. You’re most welcome. 🙂 When I have an issue with image alignment, I feel like it wrecks my whole post, so I understand how frustrating it can be.

      Like

Comments are closed.