Introduction to Tables.
Tables are one of the most versatile and useful elements in HTML design. They provide a way of strictly defining where you want various objects or elements to appear.
Tables allow you to divide your HTML page as displayed into rows and columns, and are a great aid to the presentation of crisply organised Websites.

Be warned however, tables can be both your greatest friend and your worst nightmare!

The coding for tables is quite simple, and it allows (in most browsers) for sloppier coding for the content of each cell by using the action of closing a particular cell to close all the tags within it. Thus it doesn't matter if you leave off the odd </FONT> or </H2>
but this bad practice brings with it a price to pay with the more sensitive browsers that won't allow these little indiscretions, and also means that many tags that would usually be allowed to flow through a document, such as FONT, must be implemented in each table cell.

Although the coding is forgiving on the content, the tags for the table rows and cells themselves are very sensitive to errors. A page can be fully tabled up and looking and performing really well..... some editing of content, and the accidental deletion of a table related tag (they seem to bury themselves into the code when things get complicated, and can be very easily overlooked especially when you have tables within tables) and suddenly the whole page reformats itself resembling its former self having been dragged through a hedge backwards!

The Table Tag.                <TABLE>  </TABLE>
A Closed Tag signifying the start and end of the table's definition. All table content and its own makeup go between these two tags.

Rows and Cells.                <TR> <TD> Content </TD>  </TR>
A table is made up of rows which are defined by the <TR> and </TR> tags. Each pair of these tags represents a row in the table. For every row in your table you must have a pair of <TR> and </TR>. These tags go between the <TABLE> and </TABLE> tags, this positioning of tags within tags is called "nesting."

"Nested" in the <TR> tags are the contents of the rows which you've defined.
The content is usually in the form of table "cells" which are defined by the <TD> and </TD> tags. A row contains cells and the cells contain the visible content for the page, be it text, images or a combination of both.

A Simple Table.
To make things easy to follow I have shown the displayed table content in white , the new tags in green and the tags that have been previously covered in dark green . We shall continue this colour coding throughout this section. As new tags are introduced, and as attributes for each tag are introduced, they will be shown in red.

To start with lets look at a simple table with three rows and three columns. The code for this table follows.