Tables are wonderful things, I personally use them a lot, even though they can slow down a page load if you are too generous with them! They generally wait until eveything is loaded before they display the contents of the table you see.

But if you haven't overdone the graphics (like we recommend you don't), then this shouldn't present a problem.

So how do you use tables? Before we start, one of the best sources of information on tables, (and a lot more about writing in HTML), can be found at the HTML Clinic. But more about that later. Here are some basic rules.

Tables help you sort out the layout of your web pages - including lining up small graphics and text. Best to show you by example then you can see what I mean. Let's take a look at a basics first.

A table comprises a few elements that must be seen in every table. You start with the opening command which is <TABLE> - this tells the browser to start a table.

Then you have <TH> and </TH> - this starts and ends a table HEADER CELL.

This is followed by <TR> and </TR> - which starts and ends a table ROW.

Then we have <TD> and </TD> - this starts and ends a table CELL.

Finally we have </TABLE> - which, yes, you guessed it, ends the table!

Confused? Don't worry, it will all fall into place! Tables can have 'borders' which are outlines around the text or graphics. Borders can be turned on or off as required, and I would recommend that when you design your first table you leave the border set at "1" so you can see what you are doing. You can always lose the border later by changing the border command to "0".

Here's an example of a simple table with the border 'on' and set to "1".

So how is this table made? The code is:

<TABLE BORDER="1">
<TH>This is the header cell</TH>
<TR>
<TD>This is a table cell</TD>
</TR>
</TABLE>

You will have noticed that the <TABLE> command can be 'elongated' to include the 'border' command. This is quite common practice and saves you having a row of closing tags.

Now let's remove the border. The same example now looks like this:

If you want the border to stand out, then increase the border size to a higher number. In the example below I have increased the border to "3".

You get an almost 3D effect by increasing the border size, but don't overdo it, 3 or 4 is about right!

Now let's dictate a few size commands to make the table safe for different screen sizea. The first one is WIDTH. If you don't dictate the table (and cell) width, you are likely to get disapointing results in different browser configurations.

Not everyone has (or wants) the 800 x 600 screen size you painstakingly designed your table on, so you have to allow for this. You can dictate a table size by either stating its size as a screen width percentage or definite width and height (called 'Absolute').

Personally I would strongly recommend using the percentage method. This way no matter what size screen the viewer is using the table will fit accordingly.

For example, if you set the table (or cell) width to 70%, then the table will occupy 70% of the available space on the viewers screen, no matter what size it is. If you state that the table is (for example) 500 pixels wide, then that is exactly what it will be.

If the screen is a wide one then your table will be lost in a sea of white space. If you have used the percentage method it will expand (or contract) to suit.

Enough theory, let's see the same table as above, this time with a width put in.

So what's different? I have added a width atribute (60%) to the first line <TABLE BORDER="1"  WIDTH="60%">

Now let's try the 'Absolute' method. This time I will state that the table will be 400 pixels wide.

The code now reads <TABLE BORDER="1"  WIDTH="400">

Can you see the difference? If you had a wide screen resolution >1000, then the table would remain the same size as you see it above. This is okay if you want to position something exactly on a page, but not a lot of use any other time!

That's part one of the tables pages, for the next exciting instalment, please click here.