Using Tables

Tables can be used to control the placement of text on your web page.  They can also be used to control the placement of images on your web page.

Unlike a word processor, you cannot just place or move an image or clip art to any place on your page.  Generally, images can be placed on the left or right of the page or in the centre.

Tables can give you more control over the placement of images.

Below are three small thumbnail images.  I can centre the insertion point, then place them side by side, and add a few spaces between them.  This may look OK.

           

However. it would not be possible to place a caption under the image.  To give you better control, we will use a table.  You need to know the width of the images, in this case, 150 pixels each. I also need to create a space between the images so I will allow a space of 50 pixels.  All together, I need a table which will accommodate the photos (3 x 150 = 450) and the spaces (2 x 50 = 100) for a total of 550 pixels.

I need a row for the photos and a row for the caption underneath, so I insert a table with 2 rows and 5 columns, centre it on my web page and make the width equal to 550 pixels.

         
         

I now need to set the second and fourth columns to 50 pixels.

         
         

I now can insert the images into the top cells in columns one, three and five.  I then click in the cell below the image, centre the insertion point and type the caption.

   

Lake Louise

 

Roger's Pass

 

Okanogan Valley

Finally, I have the option of making the border width equal to 0 and the lines will not be visible.  I have also added a border to the images using the border width option in Image Properties.

 

   

Lake Louise

 

Roger's Pass

 

Okanogan Valley

 

This structure is ideal for a Photo Gallery.  You can make each small image link to a larger one.  See one of my digital image pages at http://www.dfres.com/photos/mainlinks.htm for an example of these features.

If you have any questions on these instructions, please email me at floyd@uwo.ca