Perfect Image Alignment With HTML Tables

Perfect Image Alignment With HTML Tables

Did you know that HTML tables can help you achieve perfect image alignment for multiple images in your WordPress blog?

Many people (especially new bloggers) often find it problematic to align multiple images in a WordPress website using the built-in alignment tools.

In this post, we’ll be looking at a simple solution for aligning several images in a WordPress post using HTML tables. Note that this solution works if your theme supports HTML tables (requires basic HTML and CSS skills and in particular knowledge about tables).

Limitations of Default Image Alignment Tools

First, let me briefly explain the alignment features available under Edit Image settings (click on the image in the visual editor and then click on the Edit Image icon as shown below).

cyclist11

You will then be taken to the Edit Image settings screen.

cyclist22

You’re probably already familiar with these alignment settings. The options are:

  • None: Positions image to the extreme left without text wrapping around it. Next paragraph starts at bottom right corner of the image.

none

  • Left: Positions image to the extreme left with text wrapping around the right side.

left

  • Center: Positions image in the center of the content area while the text goes below or above. Text does not wrap around on the sides.

center

  • Right: Positions image on the extreme right of content space with text wrapping around the left side of image.

right

These built-in alignment tools are fine if you’re inserting one or two images in your post in different positions. However, if you want to insert multiple images and achieve perfect horizontal and vertical alignment, you may struggle to achieve an organized display of images on your blog.

HTML Tables To The Rescue

Before CSS become the standard for designing web page layouts, HTML tables did the job. Although they were cumbersome to code, table-based layouts produced clean and well-structured layouts.

The truth is that table-based layout design is almost obsolete now but there are certain situations where tables do a better job than CSS divs. For instance, if you want to display tabular data in a clean and organized way, HTML tables are the perfect solution. In fact, HTML tables are still heavily used in modern web design to display tabular data.

Also, HTML tables can provide perfect alignment for web page elements if you don’t want to deal with clearing floating elements in divs.

Let’s look at a clear example of how tables can come to your rescue when you want to display a row of images, each with a caption below.

The HTML structure looks like this:

<table style = “border-spacing: 8px; border-collapse: separate;”>
 <tr>
   <td>image1 Caption 1</td>
   <td>image2 Caption 2</td>
   <td>image3 Caption 3</td>
   <td>image4 Caption 4</td>
 </tr>
</table>

Instructions:

  • Copy the above code and paste it into the Text editor (Text should be selected). I’ve put a little spacing between the table cells using inline CSS styling in the <table> tag, i.e. “border-spacing: 8px; border-collapse: separate;”.
  • Still in the Text editor, highlight image number (image1, image2, etc) and insert your image using the Add Media button. It will generate the HTML automatically. Do the same for all table cells, i.e. <td> and that’s pretty much it. You now have a neatly aligned row of images with captions.

tables

  • To add another row of images, simply paste the exact code below the first row and upload the appropriate images.

Add the images as thumbnails. Otherwise, you will have to determine the maximum image size that your theme can display in the content column, do the math and then display the appropriate number of images in a row. Do the same if you want to display images in the sidebar using HTML tables.

Note that every WordPress theme has a maximum limit for image width that can be displayed in the content area. You need to find this out in advance so that you can plan appropriately for the width of your images depending on how many you want to display in a row.

Wrapping Up

Today, we’ve learned how to quickly insert multiple images in a row into a WordPress post using HTML tables. It is a quick and neat way to display several images in a single line in a WordPress post. There may be plugins that can do this but this approach reduces your page load time by a few seconds.

Over to you. How do you display multiple images in your posts? I’d love to hear your ideas!

2 Comments on “Perfect Image Alignment With HTML Tables

    • Yes, I’m aware of the Gallery Settings, Brin. But sometimes it’s handy to know how to manually configure alignment, especially if said gallery settings don’t play nice with your theme. Thanks for mentioning this though because I should’ve brought it up in the article!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.