Align Images: HTML Tables for WordPress Blogs

Aligning 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. 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.

• 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).

So if you want two images to be side by side on the same line start by setting the alignment of both images to left. To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:

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

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 yor use ie. whether or not it does support HTML tbles, 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
The Table Tag
The Row Tag
The Conventional Cell Tag
The Header Cell Tag
Basic Example w/Source Code
Detailed Example w/Source Code

• 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.

<table style=”border:none;”>
<td style=”border:none;”>

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

Below is  the same table with a border around the images which was accomplished by replacing the <table> with <table border=”1″>

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.

• Image editing and preparation tips part 1
• Image editing and preparation tips part 2
• Images: Optimizing, Pre-Sizing and Resizing
• Watermark Your Images
• Ten Free Online Image Compression and Optimization Programs

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

Related articles by Zemanta

• 5 Steps To Understanding Basic HTML Code (makeuseof.com)