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.
- 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:
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|
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
- 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
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||owl holding lantern|
|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.
Tools and Resources
There is no tablemaker provided at WordPress.COM in either of the two editors and no upgrade will change that. To create your own HTML tables see this resource.
Another good reference link is http://www.w3schools.com/html/html_tables.asp
Note that if you use Windows then Windows Live Writer it has a tablemaker. Note: Firefox users on Windows machines may need to clear the browser cache with ctrl+shift+del in order to get Firefox to recognize the formatting.