Page Layout using Tables

With the way that each of your visitors has their screen set to a different resolution and uses one of several different web browsers, getting your page to display exactly the way that you want it to can be difficult. One way of getting better control over the way that browsers lay out your page is to define the page content within tables. You divide up the page into various table cells and place your content into those cells and the web browser then has no choice but to display the page the way that you want it. Here's an example.

Image 1
 
Image 2
 
Image 3
 
Main Image
Image 9
 
Image 8
 
Image 7
 
Image 4
 
 Image 6
 
Image 5

The entire area of the page shown in yellow consists of several nested tables which control exactly where each of the objects within the yellow area is to be displayed. You can place whatever images, text, links, etc. wherever you want just by defining the appropriate tables like this. I have used a few simple images just to show you how it works.

Of course you probably want a totally different layout on your page than the one than the one shown here but the same principle applies to creating whatever page layout that you want.

There are a few tricks to sorting out your page layout using tables. The first is to lay out the table with border="1". You will change the border to zero once you are finished which will affect the layout slightly but having the border set to one means that you can see exactly where each table cell is and will be able to see how the table divides up your screen. Here's that table again with the borders all set to one. (I've also changed the background colour of a couple of the tables to help you to see where they are relative to the other tables.) As you can see there are actually five tables here, the outer one is there simply to provide the yellow background, the top table is divided into three columns the centre one containing the main image and the other two each containing a table holding three of my smaller images. The final table at the bottom holds the last three small images.

Image 1
 
Image 2
 
Image 3
 
Main Image
Image 9
 
Image 8
 
Image 7
 
Image 4
 
 Image 6
 
Image 5

I have used the align= parameter on some cells to force the alignment of the contents left, right, or centred. I have also used the valign= parameter to force alignments of top, bottom, or middle. This allows positioning objects offset from one another without having to create too many table cells. I have also used <br />&nbsp; to force extra space at the bottom of some table cells.

You need to be a bit careful when using nested tables. The trick here is to create the outermost table first and then create the nested tables within the appropriate cell of the outer table after you've defined everything else in the outer table. This way you will only be working with one table at a time.

Make sure that you don't accidentally insert extra spaces into your table cells. Starting a new line for a </td> tag will result in an extra space at the end of the cell which may mess up your alignment in at least some browsers. If you are going to spread your code over multiple lines then you should start a new line only in spots in the code where the new line character is replacing a space. This can either be where you actually want to include a space in what you are displaying on the screen or you can substitute a new line for the space between parameters inside of a tag. This is a good practice to follow for all of the web pages that you create.

Another trick is to use a single pixel transparent image and set the width and height parameters to force table cells to be specific widths and/or heights. Browsers sometimes adjust cell widths to allow more space for cells containing wider images and less for narrower ones which might not be what you want. Placing a transparent image scaled to the size that you want will trick the browser into thinking that there is an image the exact width that you want each cell to be so that it wont adjust them. Being transparent, the image wont show on the page and it wont add significantly to your page size either. This can help you to achieve even more accurate alignment of the objects on your page. You need to be a bit careful of using this though because Netscape 6 may treat an image one pixel high as requiring a full character height on your page (even when it is the only thing in a table cell and the cell doesn't contain any spaces) so your alignment vertically may be slightly affected when using a transparent image to force horizontal alignment. Try to use this where there is sufficient space available so that it doesn't affect your other alignments or use it where it will consistently adjust your entire page alignment vertically by a small amount. This vertical alignment problem only occurs with Netscape 6 as neither Netscape 4 or Netscape 7 have the problem.

Another thing to watch for is how you set your table width. If you want all of the objects in your layout in the same relative locations across the entire browser window then you will want to set your table and column widths as percentages. This will result in the layout adjusting itself to fill the appropriate portion of the browser window regardless of the size of the browser window. If instead you want to fix the exact positions of your content then you will want to use fixed widths. The above example uses fixed widths to ensure that no matter what screen resolution you are using that the objects will all appear in exactly the same positions on your screen. The only thing that can change with changing the width of your browser window is that I have centred the table so that as you make your browser window wider the empty space on either side will both grow as the page content remains in the centre of the browser window.

One thing to be careful of if you use fixed width tables is to consider the screen resolutions used by your visitors. While most are now using 800x600 or greater, there is still a small percentage who have their resolution set to 640x480 and if your table goes over about 500 pixels wide these visitors will end up with a horizontal scrollbar and wont see the entire width of your layout on the screen at the same time. It's not just people with low resolution screens who will be affected by this width limitation either as this is also the approximate width that will fit across the page when your web page is printed out.

Finally, here's a copy of the code that produced the above layout. The code for the various tables is shown in different colours so you can see what belongs with what. I have also colour coded the transparent image code so that you can see how this can be used.

 <table cellspacing="0" cellpadding="10" bgcolor="#ffffcc" border="0" width="420"
class="centre"><tr><td>

<table cellspacing="0" cellpadding="0" width="400" border="0" class="centre">
<tr><td><img src="img/1x1shim.gif" width="80" height="1"
border="0" alt="" />
</td><td><img src="img/1x1shim.gif" width="240" height="1"
border="0" alt="" />
</td><td><img src="img/1x1shim.gif" width="80" height="1"
border="0" alt="" />
</td></tr>
<tr><td valign="top">
<table cellspacing="0" cellpadding="0" width="80" border="0">
<tr><td class="right">
<img src="img/pic1.gif" width="32" height="32"
border="0" alt="Image 1" /> <br />&nbsp;</td></tr>
<tr><td class="left">
<img src="img/pic2.gif" width="32" height="32"
border="0" alt="Image 2" /><br />&nbsp;</td></tr>
<tr><td class="right">
<img src="img/pic3.gif" width="32" height="32"
border="0" alt="Image 3" /><br />&nbsp;</td></tr></table></td>
<td vclass="centre" class="centre">
<br /><img src="img/pic0.gif" width="180" height="100"
alt="Main Image" border="0" /></td>
<td valign="top">
<table cellspacing="0" cellpadding="0" width="80" border="0">
<tr><td class="left">
<img src="img/pic9.gif" width="32" height="32"
border="0" alt="Image 9" /><br />&nbsp;</td></tr>
<tr><td class="right">
<img src="img/pic8.gif" width="32" height="32"
border="0" alt="Image 8" /><br />&nbsp;</td></tr>
<tr><td class="left">
<img src="img/pic7.gif" width="32" height="32"
border="0" alt="Image 7" /<br />&nbsp;</td></tr></table></td></tr>
</table>
<table cellspacing="0" cellpadding="0" width="260" border="0" class="centre">
<tr><td rowspan="2" valign="top" class="left">
<img src="img/pic4.gif" width="32" height="32"
border="0" alt="Image 4" />lt;br />&nbsp;</td> <td valign="top">&nbsp;</td>
<td rowspan="2" valign="top" class="right">
<img src="img/pic6.gif" width="32" height="32"
border="0" alt="Image 6" /><br />&nbsp;</td>
</tr><tr><td class="centre">
<img src="img/pic5.gif" width="32" height="32"
border="0" alt="Image 5" /></td></tr></table>
</td></tr></table>

This code might look a bit complicated but it's all a matter of building up your page layout one bit at a time. You might start by drawing your layout on paper first and draw each of your proposed tables in using different coloured pens. This will make it easier for you to create the code as it is simply a matter of knowing which table you are working on and which cell corresponds to which location on the screen. You might even consider placing comments in the various cells to help you keep track.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate