You can see that the 3rd cell spans the width of the first two, and similarly :

You can see that the first cell spans the height of the 2nd and 3rd.

Just to prove the point, the gridlines for this page have been switched on. As with most tags, you can "nest" the tag. For example, you can have a table within a table. To see this, look at the menu on the right. You'll notice that the cell lines are much finer. That's because it's another table within the main one. This helps with lining up the images.

BORDER= controls the thickness of the gridlines. Set it to 1 and you can have a smart thin borderline, se it to 30 and you can have a picture frame!!

CELLSPACING= is the gap in pixels the browser leaves between each cell, the examples above use a gap of 1. The one below uses a gap of 5, and a border of 2.

CELLPADDING= Is the margin between the edge of a cell and the contents. The below example uses a gap of 10.

WIDTH= & HEIGHT= is a pretty obvious one I think, it's the area of the screen the table takes up. It can be either in % or pixels.If you're designing with a particular screen res in mind it's best to specify values in pixels.

BGCOLOR= sets the colour of the background of the table. You can also individually colour tables or rows. IE adds support for BORDERCOLOR to control the colour of the borders, and BORDERCOLORLIGHT/DARK to control the colours of 3D tables and BACKGROUND to add wallpaper to a table! Here's an example, the BORDER is 5 as is the CELLSPACING, the CELLPADDING is 10, the width is 75% the BGCOLOR is black and the first row is red. ITEM#1 is right aligned, ITEM#2 left and ITEM#3 is centred.

ALIGN= is the alignment of the text in the table horizontally, by default as with most things, it's to the left.
VALIGN= is the vertical alignment, which can be TOP, BOTTOM, MIDDLE etc..

Here's the tag for that last table, just the table tag mind.

<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 WIDTH=75% BGCOLOR=#000000>

That's just the enclosing tag, then you have to define the data itself.

Then there's another TR tag, and 3 more TD tags. The first TD contains the sub heading "What's a Table ?". The next contains my explanation, and the third contains another table. This other table is the menu that you see on the right. I've told the browser that I want this particular cell to span x rows down, that is to stretch down x amount of cells.

So, I start my next subheading off with another TR tag, but only two TD tags this time, one for the sub heading and another for the explanation. That's because the TD tag in the previous row stretches down past this one, so it's effectively the third TD. And it continues in this two TD fashion until the bottom.

If that's all a little confusing, take a look at this example :

The settings for the table are set up as follows :
<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=2>
The first row is started with <TR>, then the first cell is opened with <TD>. Then I typed BLANK, and closed the cell with </TD>. Then I start the next cell with <TD> and I typed TITLE and closed it with </TD>, with another cell with BLANK written in it with <TD>BLANK</TD> and I finished off the row with </TR>. So that whole row looks like :

<TR><TD>BLANK</TD><TD>TITLE</TD><TD>BLANK</TD></TR>

Then, I did a similar thing for the second row, except this time, for the last cell, that one that contains MENU SYSTEM, I added ROWSPAN=3. So the end looks like this :

<TD ROWSPAN=3>MENU SYSTEM</TD></TR>

The next two rows only have two cells in them, so we only need two TD tags, so it looks like this :

<TR><TD>SUB HEADING #2</TD><TD>EXPLANATION#2</TD></TR>
<TR><TD>SUB HEADING #3</TD><TD>EXPLANATION#3</TD></TR>

And I finished the table with <TABLE>.

If you can't grasp that, try and work it through on a piece of paper, it's quite an important part of web design if you take it seriously.

As with the TR tag, the TD has most of the properties of a table. However, a BGCOLOR applied to a TD tag will only apply to that cell, not the whole row or column as with a TR tag.

Both tags support the ALIGN and VALIGN tags. To apply a style to a whole row, add it to the TR tag, to apply it to a cell or cells use it in the TD tag. Values for ALIGN are LEFT, RIGHT, CENTER. Values for VAILGN are TOP, BOTTOM, MIDDLE. I dare say you can use some more which apply to the IMG (picture) tag, but these are of the most use.

The only problem with tables is that the browser has to wait for the contents to load before it knows how to format and display a table. So it's wise if you have a particularly long document, to split it into several tables. Also, if you include images, specify the size in pixels of each image. Otherwise the browser will have to load each image before it knows how much room to allocate.

You'll notice that these pages use a margin, and if you have Netscape 3 it will be coloured. However, to see a better example of the margin idea, click here to see the introductory page of Sennocke. This shows a far nicer example. (Produced by me of course :-).

To use a table as a picture frame, make a table with a large border, have one TR and one TD tag with the image contained in these. Make sure you align the image to the centre and middle of the tags.