Tables Tutorial : Lining Up Images

Lining Up Images With Tables

In this tutorial we're going to show you how to line up your images neatly using a table.  This is the approach used by default on the product logo pages.  Take the product images below as an example:

How did we line them up so neatly?  The trick is in using a table.  Click the "Insert/ Edit Table" button  towards the end of row 2 in your editor.  This will bring up the following dialog:

In our example we used 1 row (across), with 3 columns (one for each logo).  We change the width to 100 percent, and the border size to 0 (so there are no black lines around the logos).  Click "OK" to create your table.

You'll see a gray outline around the cells of the table.  Click in each cell and select the "Insert/ Edit Image" button to add an image to that cell (note that after adding the first image the cell will expand and the remaining empty cells will shrink - aim and click carefully to make sure you are selecting an empty cell).  You'll find a bunch of logos ready to use in your image database in the "logos" folder.  These have all been presized to width 167 px, so three of them will neatly fit within the width of the layout (525 px).  If you're adding your own logos, simply resize them to 167 px before adding them so you can fit three across.  If you wish to fit more in one row (4 or more), simply size them down accordingly.

Once you have added your images, you may optionally select each image and click the "Center Justify" button  to center the image within its cell.  This will ensure that all the images in one column are lined up.  Repeat this process until all the cells are filled with your logos, and don't forget to "Submit" your page to save your work.

Voila :)  You've created a table of image logos that to the user appear simply as a series of images lined up perfectly.