How to Use HTML Tables to Align Images

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:

When what you wanted was this:

Table 1

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

Table 2

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:

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:

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