The Table is one of the most useful tools in HTML! You may think a Table is for the presentation of figures, and you'd be right there, but the main use is as a layout tool. "Normal" HTML will display information sequentially, with some limited ability to "position" items on the screen. The <PRE> ... </PRE> tags will let you display text where you want it, but only in a typewriter-style font, whereas by use of a table you may set out on a single page as many "cells" of information (text or graphic) as you need, in the exact place you want them to be. I have used Tables several times during the construction of this tutorial, for example, to set out the lists of colours in the Text Appearance and Background & Colours chapters and the list of Targets in the Links chapter.

The basic commands are quite simple. A Table is enclosed between the <TABLE> ... </TABLE> tags (surprise, surprise!), then can have several optional settings specified, following which the individual "cells" are set out, row by row. The most frequently used optional settings comprise BORDER=?, CELLSPACING=?, CELLPADDING=?, COLS=?, WIDTH=? and SUMMARY="nnn" (where nnn is the name of the Table). It is always good practice to specify BORDER, CELLSPACING and CELLPADDING. They are quite self-explanetary - BORDER sets the width of an enclosing border in pixels, CELLSPACING sets a space between cells and CELLPADDING sets the space within cells. WIDTH sets, obviously, the width of the table but may be expressed as either the percentage of the screen available or as a specified number of pixels whilst SUMMARY is more of a programming aid.
When writing a Table it is always best to set a value for the BORDER, even if the final result doesn't need one, as that way it is easier to see how it is shaping up and where, for example, cell widths or row heights might need a little "tweaking".

The rows are designated by <TR> ... </TR> (TABLE ROW) tags whilst the cells are designated by the <TD> ... >/TD> (TABLE DATA) tags.

Here is a very simple four cell table with the BORDER, CELLSPACING and CELLPADDING values set to zero:-

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" SUMMARY=="Table1">
<TR>
<TD>Cell Number 1</TD>
<TD>Cell Number 2</TD>
<TD>Cell Number 3</TD>
<TD>Cell Number 4</TD>
</TR>
</TABLE>

Now see what happens when we give BORDER a value of 1.

Now give CELLSPACING a value of 5.

And now give CELLPADDING a value of 5.

Now we will re-set all values except BORDER to 0. Instead of just one row of 4 cells, let's make it two rows of two:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" SUMMARY=="Table2">
<TR>
<TD>Cell Number 1</TD>
<TD>Cell Number 2</TD>
</TR>
<TR>
<TD>Cell Number 3</TD>
<TD>Cell Number 4</TD>
</TR>
</TABLE>

When a browser isn't told in advance the width of a Table it will take longer to display it as it has to calculate all the instructions before being able to draw it on-screen. To avoid that, let's make the table fit three quarters of the screen available:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" WIDTH="75%" SUMMARY="Table2">
<TR>
<TD>Cell Number 1</TD>
<TD>Cell Number 2</TD>
</TR>
<TR>
<TD>Cell Number 3</TD>
<TD>Cell Number 4</TD>
</TR>
</TABLE>

Now make the Table 400 pixels wide:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" WIDTH="400" SUMMARY="Table2">
<TR>
<TD>Cell Number 1</TD>
<TD>Cell Number 2</TD>
</TR>
<TR>
<TD>Cell Number 3</TD>
<TD>Cell Number 4</TD>
</TR>
</TABLE>

Suppose we want two different width colums? Simple. We just give the cells on the first row the appropriate values:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" WIDTH="400" SUMMARY="Table2">
<TR>
<TD width="150">Cell Number 1</TD>
<TD width="250">Cell Number 2</TD>
</TR>
<TR>
<TD>Cell Number 3</TD>
<TD>Cell Number 4</TD>
</TR>
</TABLE>
(It is important to remember that a column cannot have cells of varying widths. The whole column will assume the width of the widest cell)

Now let's put some more info into cell 4, using the <BR> tag to force new lines:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" WIDTH="400" SUMMARY="Table2">
<TR>
<TD width="150">Cell Number 1</TD>
<TD width="250">Cell Number 2</TD>
</TR>
<TR>
<TD>Cell Number 3</TD>
<TD>Cell Number 4<BR>Could contain<BR>Names,<BR>Numbers,<BR>Or Addresses.</TD>
</TR>
</TABLE>

This now causes a problem with Cell Number 3 which, by default, puts its text in the middle vertically. To avoid this problem we can use the VALIGN="TOP" command:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" WIDTH="400" SUMMARY="Table2">
<TR>
<TD width="150">Cell Number 1</TD>
<TD width="250">Cell Number 2</TD>
</TR>
<TR>
<TD VALIGN="TOP">Cell Number 3</TD>
<TD>Cell Number 4<BR>Could contain<BR>Names,<BR>Numbers,<BR>Or Addresses.</TD>
</TR>
</TABLE>

Now suppose we want each piece of information in Cell 4 to have a cell of it's own. The simple way is to just add more cells with the ones under Cell 3 having no text which no longer requires the VALIGN command:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" WIDTH="400" SUMMARY="Table2">
<TR>
<TD width="150">Cell Number 1</TD>
<TD width="250">Cell Number 2</TD>
</TR>
<TR>
<TD>Cell Number 3</TD>
<TD>Cell Number 4</TD>
</TR>
<TR>
<TD></TD>
<TD>Could contain</TD>
</TR>
<TR>
<TD></TD>
<TD>Names,</TD>
</TR>
<TR>
<TD></TD>
<TD>Numbers,</TD>
</TR>
<TR>
<TD></TD>
<TD>Or Addresses.</TD>
</TR>
</TABLE>

This, however, may not look too neat, so now we can introduce the ROWSPAN command to force Cell 3 to be as high as Cells 4, 6, 8, 10 & 12 added together. Obviously, having increased the height of this cell, we no longer need all the empty cells we had before. Cell 4 is five rows high, so the ROWSPAN command needs to be set to the value of 5. We will, however, need to re-introduce the VALIGN command:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" WIDTH="400" SUMMARY="Table2">
<TR>
<TD width="150">Cell Number 1</TD>
<TD width="250">Cell Number 2</TD>
</TR>
<TR>
<TD ROWSPAN="5" VALIGN="TOP">Cell Number 3</TD>
<TD>Cell Number 4</TD>
</TR>
<TR>
<TD>Could contain</TD>
</TR>
<TR>
<TD>Names,</TD>
</TR>
<TR>
<TD>Numbers,</TD>
</TR>
<TR>
<TD>Or Addresses.</TD>
</TR>
</TABLE>

Similarly, we can increase the width of a cell by using COLSPAN to take it across two or more columns:

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0" WIDTH="400" SUMMARY="Table2">
<TR>
<TD width="150">Cell Number 1</TD>
<TD width="250">Cell Number 2</TD>
</TR>
<TR>
<TD COLSPAN="2">Cell Number 3<BR>Could contain<BR>Names,<BR>Numbers,<BR>Or Addresses.</TD>
</TR>
</TABLE>

We have already used VALIGN="TOP", other values of VALIGN are "MIDDLE" and "BOTTOM". "MIDDLE" is the default value, as was demonstrated above before we first introduced the VALIGN command.
There are several more commands that can be used to make your tables look more interesting, some of which are:
At the top of your table you could use TABLE HEADING <TH> in place of a <TD> which produces a bolder font, centred in the cell.
You can change the background colour of the cell with the <BGCOLOR=> command and the font colour with the <FONT COLOR=> command. In addition, a background image can be added to the table content using the <BACKGROUND=> command in the <TABLE> element.
We have mentioned above how to set the width of an individual column, it is also possible to specify the height of a row using the <HEIGHT=> command in the first cell. Obviously, should a subsequent cell in the row have an image/font which is higher than the set figure, this will override the set figure as all cells in a row must have the same height. The way to get round this problem should you need to display different height data adjacently, and for different cell widths vertically, is to use more than one row or column incorporating the <ROWSPAN> or <COLSPAN> command for the bigger one(s). This way quite involved screens can be designed which can, if done properly, look very effective.
All the commands mentioned above should work with all modern browsers, but it is important to remember that there are no defined standards in browsers and therefore, apart from the basic commands above, you may well come across commands that either work for one browser only or, at best, work for only a few. Unfortunately Microsoft is one of the worst offenders when it comes to introducing browser-specific HTML commands and therefore, because Internet Explorer is the most used browser, many people write their web pages so that they work perfectly in IE without realising that they may not work elsewhere. To complicate matters further, what will work in one version of IE doesn't necessarily work in another! When MS introduces new commands Netscape (themselves guilty of browser specific commands on a smaller scale) normally try to incorporate them too but most of the other browsers (especially on non-Windows platforms) can't handle them. This usually means the command is ignored so the browser concerned shouldn't crash but your information will be displayed in an incomplete manner

There are several more commands available but I won't touch on them here as this is a basic introduction to HTML rather than an in depth one!