how to put pictures or buttons side by side on your blog

Hi!

I believe my fellow bloggers will find this post very useful!

This post explains how to put pictures or buttons, side by side, on your blog or website, rather than one below the other.

Introduction

Rikka from Ricochet and Away! and I have been working like busy little bees to bring to you the Retro Pillow Challenge:

I wanted to put our six buttons on the page, but in a compact way, so that they will appear two in a row.
I did the same thing in my tutorials page. Here's a small image of that:

Each picture, and the text above it, is a link to the relevant tutorial. Isn't it nice how they appear two in a row like that?

If you look carefully, you'll see that the images aren't all the same size. You can leave them that way if you're OK with it. But if you prefer to change that, it can be fixed in one of two ways:

1. Cropping or resizing the original images to identical dimensions, such as a square shape of 150x150 pixels. This is easily achieved using picasa (crop to a square shape, and export to a size of 150 pixels).
   
   
2. There's another way to do it by editing the raw HTML, but I recommend you don't because it can get messy!

Here's how it looks when the images are all the same size - isn't it nice?

all images are the same size

Instructions

OK, so let's get down to business! I'll show you how to get your images side-by-side like that. I put two images in each row, but you can have three, four, or however many you like per row.

Step 1 - Generate an HTML table

Open this webpage in a new window.

Set the number of columns - this affects how many images will appear per row.

Set the number of rows - this affects how many rows of images will appear.

I want to fit two images per row, so I set "2 columns".
I need a total of two rows to fit all my images, so I set "2 rows".

Press the "Change Table Size" button.

The table that appears below the "Change Table Size" button should now have the number of rows and columns that you set it to have.

Now, add this text inside each cell in the table:
this is a table cell

And press the "Generate HTML for Table" button.

Step 2 - Copy the HTML table to your blog / website

Copy the HTML text that appears under this sentence on that webpage. Be sure to copy all of the text: 

HTML Code of Your Table is/will be in This Big Box

Change to "Edit HTML" mode in your blog post. Paste the HTML code, that you copied previously, at the bottom of the page (your blog post HTML editing page). Then go back to the normal "Compose" mode.

Here's how it looks when I paste my table:

this is a table cell	this is a table cell
this is a table cell	this is a table cell

You can see that my table has two rows and two columns - a total of four cells.

Step 3 - Add your images into the table

Add an image, and any optional text you want, inside each table cell. You can add links, change the text font or color, etc., just like you normally do when writing your blog post. Erase the text in the cell ("this is a table cell") - we only added it temporarily, otherwise the generated table would be tiny and you would find it hard to paste your pictures into it.

Here's how it looks after I've done that:

here's the sew la vie! button!	Here's Ricochet and Away!'s button

Step 4 - Make the table borders invisible

The table border is set to 1, which is why we see a border around each cell.
If you want the table border to be invisible, go back to HTML mode, search for this text, and change the "1" to a "0".

table border="1"


This is what you get - and you're done!

here's the sew la vie! button!	Here's Ricochet and Away!'s button

Note
You can try a slight variation for this technique - add as many columns as you want, but only one row. Add your images one below the other in each row. This might end up looking funny if one cell is longer than the other.



How'd it go?

If you have any questions, or if you like this technique, please leave a comment!