Blogging Tips

Using HTML Tables to Align Images is Quick and Easy

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!

Advertisements

9 thoughts on “Using HTML Tables to Align Images is Quick and Easy”

    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

Share Your Thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s