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!

Blogging Tips

Adding Instagram and ‘Add to Goodreads’ Button to Your Blog

Did you notice I added a new page to TGB? It’s a companion to my WordPress.com Tips and Blogging Tips called Ask the Geek where readers can ask questions having to do with wordpress.com and blogging in general. I’m very excited to kick it off today with a question from Ezi over at  Oh My Shelves.

Ezi writes:

I want to improve my blog. How do I add the Instagram to my blog? Also, on my reviews, how do I get the “add to goodreads” button?

Thank you so much!

Instagram

You can add an Instagram widget to your blog. I’m not familiar with worpress.org, so I’ll link you to the page that describes how to do this. Click here.

For wordpress.com users, do the following:

Click Customize in the lower right corner of your blog. In the Customizer menu, click on Widgets, Sidebar (or Footer), Add Widget, and finally Instagram.

As the widget says, you’ll should click Save and Publish, because clicking on Authorize Instagram Access will temporarily take you out of the customizer. Once authorized, you will be able to choose how many images will be displayed (1 – 20) and the number of columns (1 – 3). Click Save and Publish and you’re all set!

Add to Goodreads Button

goodreads-badge-add-plus

Right click and select Save image as… to download the button,  and upload the image to your blog. Then all you have to do is insert the image where you want it in your post.

Linking the Image

atg1

Clicking on an image will give you the option to change the image alignment—left, center, right, or no alignment. You will also be able to increase or decrease the size of the image, or even add a caption. It’s also the first step in making your image—the ‘add to Goodreads’ button, in this case—into a link.

After you click the image (and changed the alignment, if you wish to do so) the next thing you need to do is click the link button. In that box that opens up, type in the url and check the Open link in a new window/tab box 1 and finally, click the ‘Add Link’ button. (There is no need to type anything into the Link Text box, because you’re using an image.)

img_008

And that’s all you have to do to use any image as a link.

If you have a question that needs an answer, head on over to the Ask the Geek page and submit your question!


  1. I always check this box in case the person reading my post isn’t ready to leave my blog completely. 
Blogging Tips, Wordpress Tips

Blog Group on Facebook

Looking for blogging advice and a place to ask questions and get answers where you can also socialize with other bloggers? Come join us on this Facebook group! Let’s support one another and share what we’ve learned. 🙂

LizaJaneChronicles: Adventures in Momlandia

blogging-428955_1920

I’ve been talking to other bloggers and nobody can tell me where to find a group where bloggers can talk, learn, socialize, etc.

I see message boards but they aren’t my favorite thing.

I’ve joined book blog groups but nobody posts anything.

I want to learn people! I want to talk to other bloggers about obstacles, pros, cons and whatnot. I want to share the experience and learn from others what makes them successful and what they regret.

Does this seem interesting to you?

Come join us and help us and yourself be the best blogger you can be! CLICK HERE!

Be warned that the group is new and will be changing and growing as members join and we all learn new things.

View original post