TABLES
There are two more useful ways of utilising Tables on your webpage - you can use a Table or Tables to organise the whole of your page content (including solving the thorny problem of layout with bordered backgrounds) and to put frames round your images. As this last is easiest to explain, I will deal with it first!
PUTTING FRAMES ROUND YOUR PICTURES
Of course, you could frame your pictures BEFORE you save them, using a graphics program, but here we are supposing you didn't.......
 | Basic image, unframed |
| Same image, default frame, border="7" |
| Same image, border="7" bordercolor="000077" |
These are both done in the same way, the only difference is in the attributes you give the Table border : both these are TABLE border="7", the grey one is the (unspecified) default colour and the blue one has its colour specified as a hexadecimal code : TABLE border="7" bordercolor="000077".
To put the frame round the picture, first position your image wherever you want it (using the IMG ALIGN tag or inserting it in a Table cell, etc.) When this is to your liking, then you need to put a simple one-cell table around the image:
<TABLE BORDER="7"><TR><TD>
<IMG SRC="Myphoto.gif" alt="Photo of me" height="100" width="100">
</TD></TR></TABLE>
This will give you the effect as in the middle picture - to get the bottom one, you need to add a bordercolor="" within the Table tag.
ARRANGING YOUR WHOLE PAGE
One of the less-obvious uses of Tables is to organise your whole page - invisibly! This is particularly useful for positioning and captioning pictures, and is the only way you can get text on BOTH sides of an image, or even completely surrounding it.
To do this, you need to lay your page (or the relevant part of it) out as a Table : this is not as odd as it sounds, WYSIWYG page builders make extensive use of "invisible" Tables and they can get VERY complex, taking a long time to load and sometimes just begging to go wrong.....
If you can't visualise your page as a table, with the different headings, pictures and chunks of text in the various cells, it might help to sketch it out on paper. When you have the layout to your liking, type in the HTML exactly as for any other Table but with one important difference : set the border attribute to "0" and do NOT specify a colour. This will have the effect of making the border and cells "disappear" - if you need to check where the cells actually are, you can always start off with a border of "1" and change it to "0" when you are satisfied with the page.
This page you are reading now is in fact laid out in a series of tables - four to be precise - one (invisible) to set the main body of the page away from the bordered backgound, two to put frames round two of the pictures in the centre of the page, and a fourth (invisible) Table to position the pictures and their corresponding text. These Tables are all nested - the main Table is the one which sets the "empty" cell for the page border and the cell for the body of the page; within that we have the table to position the three pictures, and within THAT we have the Tables which make the picture frames.
Go to "View...source" on your top Browser bar and have a look; it will probably be clearer if the page HTML has all the data, measurements etc. removed :
<HTML><HEAD>***</HEAD><BODY>
<TABLE BORDER="0"><TR><TD>blank GIF to set empty cell</TD>
<TD>whole of the content of the page - including
<TABLE BORDER="0">
<TR><TD>
unframed picture </TD><TD>text</TD></TR>
<TR><TD>
<TABLE BORDER="7"><TR><TD>framed picture</TD></TR></TABLE>
</TD><TD>text</TD></TR>
<TR><TD>
<TABLE BORDER="7"><TR><TD>second framed picture</TD></TR></TABLE>
</TD><TD>text</TD></TR>
</TABLE>
</TD></TR></TABLE>
</BODY></HTML>
Always check that you have the same number of "close Table" tag sets as "open Table" tag sets - it will save you a lot of grief later!! The pairs are indicated in colour in the example above for clarity.
The easiest way to learn this technique is to try it out - experiment with the Table tags, attributes, cell layout (colspan, rowspan etc.) until you get a page which pleases you.
For a more detailed explanation of how to use bordered backgrounds, click here
Back to main index and home page
Email me if you want to know more or need help.
Header clipart image free with Microsoft Office