Align Images: HTML Tables for WordPress Blogs

sad girlAligning multiple images in a WordPress blog in an attractive and organized manner is frequently problematic, most particularly for new bloggers. They often ask:  Why don’t my images align the way I want them to?

This second HTML table tutorial is aimed  answering that question and providing a solution.  After wrestling with alignment and spacing in the editor, I discovered placing images in HTML tables  in my WordPress blog presented them extremely well and was easy to do, provided your theme does support HTML tables but not all themes do.

Why don’t my images align the way I want them to?

The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it.

  • Align-left means position left, with the rest of the content wrapping around the right side of the image.
  • Align-right means position right, with the rest of the content wrapping around the left side of the image.
  • Align-center means position center, with no wrap-around (= the rest of the content below the image).

If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

To prevent the staggered effect what you do is insert the following snippet of code into the Text (HTML) editor after each image/text pair:

<div style="clear:both;"></div>

As clicking text alignment icons in the WordPress Visual editor will not always result in an attractive and organized multiple image display in your WordPress blog, depending on the theme you use ie. whether or not it does support HTML tables, if you want to create a post with multiple images  and control their alignment another  way to do that is to use HTML tables.

HTML Table Structure and Code

HTML tables are constructed of rows and cells. How many rows and how many cells is up to you.

row 1, cell 1 row 1, cell 2 row 1, cell 3
row 2, cell 1 row 2, cell 2 row 2, cell 3

<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>

HTML Tables

  • table means “start” the table.
  • you can adjust numbers in border, cellspacing, and cellpadding; align center, right, or left
  • headings in a table are defined with the <th> tag like this <th>Another Heading</th>
  • body means start entering your contents into the table
  • tr means start a table row
  • td means put data, image or text
  • repeat td as many times as you want cells across your table
  • repeat the table rows (tr) as many times as you want
  • for every < there is a > <something>
  • for every < > start there must be a </> close
  • </table> means close the table

The sample table below is for the display of 4 thumbnail images lined up side by side with captions immediately under the images. If you have uploaded larger images then when readers click the thumbnail images they are taken to a separate page where they can view the associated full size image.

Basic HTML Table – 2 rows, 4 cells

<table>
<tr>
<td>INSERT_IMAGE1_URL_HERE</td>
<td>INSERT_IMAGE2_URL_HERE </td>
<td>INSERT_IMAGE3_URL_HERE </td>
<td>INSERT_IMAGE4_URL_HERE </td>
</tr>
<tr>
<td>INSERT_IMAGE1_CAPTION_HERE </td>
<td>INSERT_IMAGE2_CAPTION_HERE </td>
<td>INSERT_IMAGE3_CAPTION_HERE </td>
<td>INSERT_IMAGE4_CAPTION_HERE </td>
</tr>
<tr>
</table>

Copy and Paste HTML Table Instructions

1.   If you wish to use the code above to display multiple images in your WordPress blog in an HTML table, copy and paste the code  into the HTML editor in your post or page.

2.    You can either continue to use the HTML editor or you can switch to the Visual editor and upload the individual thumbnail size images into the table cells where it says INSERT_IMAGE(1,2,3,4) _URL_HERE.

3.   Once you have done that you can type captions into the corresponding cells where is says INSERT_IMAGE (1,2,3,4)_CAPTION_HERE. As the captions are text you can use the alignment (left, center, right) icons in the WordPress editor to align the text.

Below is  the finished table with the thumbnail images and captions inserted into it so you can see how it will display like in your WordPress blog post. I chose to make each thumbnail size 100 pixels x 100 pixels (square). I  choose not to have a border around the images but in some themes what’s required is Overriding default table borders.

Differences Between HTML 4.01 and HTML5 – HTML5 only supports the “border” attribute, and its value can be “1″ or “”. More here w3 schools HTML table tag.

the number 5 don't panic button red star icon owl
the number 5 don’t panic button red star owl holding lantern
the number 5 don't panic button red star icon owl
the number 5 don’t panic button red star owl holding lantern

Notes on HTML Tables

1.   Using the HTML table approach for displaying multiple image in WordPress blogs means you will reduce page loading time,  which is a blessing to all those who are on dial-up, mobile, etc.It also allows the reader to choose which images to click and view see at full size.

2.   Prepare the images for your HTML table offline by watermarking, optimizing, pre-sizing and them prior to uploading them. You can use either a free desk top image program or an online image editing program.

3.   If you do not wish to use the thumbnail image size then you will have to determine the maximum displayed image size for your own theme. Then you will have to do the math in advance in order to choose the size that will allow 4 (3, 2, 1) images to display side by side in the the post space of the theme, and/or reduce the number of table cells to 3, 2, 1 as required.

If you wish to create an HTML table and display it in the sidebar as I have done  then you will need to the sidebar width for your own theme. Then you will have to do the math in advance in order to choose the size that will allow 4 (3, 2, 1) images to display side by side in the the post space of the theme, and/or reduce the number of table cells to 3, 2, 1 as required.

Most themes have a specific width limit (measured in pixels) for images inserted in a post or a page. The widths of current wordpress.com themes can be found in: Maximum displayed image width. The width of sidebars for all current wordpress.themes can be found in this post: Sidebar Width.

Other References:
Help With HTML Tables
HTML Tables
HTML Code Tutorial – Tables

123 thoughts on “Align Images: HTML Tables for WordPress Blogs

  1. Pingback: One very cool really hot site for WordPress bloggers | The Balsamean

  2. Pingback: Pinterest, Creative Property Rights, and Miscellany « The Shop Sampler

  3. Pingback: What Happened to New Year Resolve?! « Blackwork Lessons

  4. I have a table which I use to align images and text. I update it regularly with additional images which i want to appear in row 1 column 1. Is there a way for everything to move to the next cell across without having to manually cut and paste each image and associated text? Thanks

  5. Very useful guide for starters. By the way, it is possible that my border on the table would be the same as your border you have used above?

    If I put border to 1, it wraps a square box. Unlike in your border that it only put horizontal line both on top and bottom and not in vertical sides.

    thanks

  6. Can I use these instructions in a text widget on a wordpress.com blog to align facebook, twitter, RSS icons? If so, where do I put in the link to go to those pages?

  7. Hi Timethief,

    I have had troubles with aligning images in the twenty eleven theme for a while. I want one main image aligned left with four images to the right of it, two above and two below. First I used the align feature which did not work. I then floated the images which worked in everything but IE (oh yes IE the developers nightmare!) the client wants it working in IE so I had to scrap that idea. I started using a table method thinking that it should work the same in all browsers, but alas no. For some reason they are either adding space above or below the rows. I have stumbled on this blog and I really hope that you can show me where I am going wrong. Here is the page in question http://www.made-by-marion.com/ and here is the code I have used:

    I have amended all the relevant css so there shouldn’t be anything being added in there. AAARRRGGGHHH!!!!!

    Please, please, please I am at my wits end!
    Many thanks,
    Olly

    • WordPress.com and WordPress.org run on different software. Themes that have the same names like Twenty Eleven come in two different versions. I’m familiar only with the WordPress.com version. I can’t help you with this – sorry.

  8. This looks interesting! I haven’t had time to really look into it but I saved it to my favorites. You are indeed the most responsive person I’ve ever encountered in this world of forums, tips and help. Thank you very much! Great site and love your “tag name” — Timethief; so much of this is a time thief!

    • I hope you find a suitable program to do this and Picasa looked like it may do the job of creating a photo collage. I don’t think an HTML table is the best choice for the diversity of image sizes you want to display. Please let me know how you work this out in the end. Time flys when you blog. :)

  9. I wasn’t asking you to do that. There’s obviuosly not an easy answer to this, so I decided to take my 3 photos and make one photo out of it in Photoshop. Thank you again for your prompt reponse.

  10. Thank you for your quick response. However, the only table generators I find are basic 1 row over, 1 column up — can’t find anything for putting 3 together like in this blog: jayscatering.com/blog/2011/08/31/are-you-ready-for-some-football/ see 2nd set of photos. Just seems like there should be an easier way.
    Thanks!

    • Making table means creating a grid of rows and cells and filling them. I provided the basics for you. Now it’s up to you to put them together to create the display you want. I’m sorry but I’m not volunteering to start coding tables for my readers.

  11. Thank you for your table sample. I want to put 3 images together, 1 taller one on the right hand side and the 2 shorter ones on the left hand side. How would I merge the cells to create the space for the taller photo on the right?

  12. Is it possible that a theme is written to not include this function? I’ve been having terrible problems with my theme. Anyway, I input the table html as you have it written and it just continues to show it as code and it shows the link to the image, not the image itself.

    Thank you for this instruction.

    • I suppose it is possible that the theme is interefering with posting a table but without the code I can’t really help you. Generally speaking, if the image has been uploaded into your Media Library then there ought to be no problem with displaying it and you should see it rather than code.

  13. I am hoping you might have an idea as to how I can resolve my WP table problem. Running WP 3.2.1 with the 2011 theme. I have been trying for weeks now but cant seem to create a simple table that looks like this:

    philosopherscafe.ca/Capture.PNG

    But whether I create the table in the editor, Word or Windows Live Writer, the formatting, line spacing and other things get messed up and the text gets push to starting below the image. You can see what I mean here:

    philosopherscafe.ca/2011/07/philosophy-of-religion-and-the-problem-of-evil-why-would-a-benevolent-deity-allow-evil-to-exist/

    Since I am using a child theme I have been trying various css to remove all table formatting to see if that works, but I am not sure what needs to be in the css to do this. By any chance do you have any ideas as to how I can create a nice tight clean table, with minimal spacing between the text and along next to a small 100×100 image?

    • I can’t help. I switched this blog on the weekend to Twenty Eleven and that tables that work fine in Inuit Types became scrambled. No amount of redoing the corde would produce a table. I gave up and I switched back.

    • If you used something like photoshop and created text over the image and then uploaded it into your blog – yes. If you mean can you use the blog editor to overwrite text onto an image file in your blog – no.

      • not really talking about the blog editor I was wondering if this could be done with html.

        • Sorry I don’t know of a way to do this on a wordpress blog and that’s all I can say. I’m not a coder by any means.

  14. I spent all morning trying to get my stupids pictures to line up properly! Thanks for this post! It was exactly what I needed!

    - Nathe

  15. Pingback: How to format image and text combinations in WordPress | Tame Techy

  16. Thank you so much!
    This was very useful. I’ve trying make some tables in my blog, and for a test, I made just one cell: the wordpress reconized that as something useless and drop out my code, and placed only the word that i write in the cell on the output.
    I’m looking for a plugin that do something like a mouse-over effect, like a popup. Do you know a good one!?
    Thanks again! Great post!

  17. This is exactly what I needed. Thanks for sharing. I think there should be a tool type to embed this code. Perhaps in a future version of WP ?

    • I’m glad you found it. :) I haven’t heard anything about including it in the editor which is TinyMCE from moxiecode. There are table functions available for that editor but they haven’t been installed and made available here.

  18. Hey, Timethief

    You always have great tips to help with designing and maintaining WordPress blogs. That’s a fantastic idea to use tables for times when it’s difficult to align images properly. I recently saw a plugin for image alignment, but can’t recall its name. Didn’t try it out, so I don’t know if it’ll help.

    Anyway, great post!

    • Hello again and thanks. There is no FTP access to wordpress.com blogs and we cannot install indiviudal plugins into them.

  19. follow-up to last comment…I should add that in the right column of the table, I am inserting google spreadsheets.

    Thank you much!

  20. Hi timethief.

    I have a bit of a problem. The html tables I am inserting into my static pages are distorting images in chrome and EI. Firefox is fine. Is this a wordpress problem, or do you think it has something to do with Atahualpa theme?

    first go to firefox to see what it should really look like. The images (which I use as links to go to different pages) are normal size.

    The images I used for the buttons in the left column get distorted (smaller) when the window of the IE browser is partially minimized, and in chrome they are also smaller than they should be.

    Are there any tips/tricks or wordpress addons that you are aware of that might eliminiate the problem?

  21. Thanks so much! This is exactly what I was looking for. Got my three pics in my blog post to line up perfectly!

  22. I always had problems with aligning tables…I am now primarily using divs with CSS in all of my sites which makes it easier to control them.

Comments are closed.