While it is true that TABLES can be somewhat complex and a bit more confusing to learn, mastering them is well worth your effort. Tables are beneficial for much more than just presenting your data in tabular columns. They can be a valuable aid in formatting your pages, graphics, and images. It's probably easiest to think of a TABLE as a flat, two dimensional box that you can put on your web page. Inside of this box you can place other boxes, CELLS, and inside of these boxes, you can put text, images, or even more boxes.

The basic elements of the TABLE consist of the <TABLE>...</TABLE> TAG which surrounds the entire TABLE, the <TR> TAG which defines the individual rows of the TABLE and the <TD> TAG which defines the cells within the TABLE rows. Another TAG is the <TH> TAG which creates a table header in a bold font. The attributes of the <TABLE> TAG will affect the entire table. They are as follows:

<ALIGN>Enables text to flow around the table. values are align=left or align=right.

<BORDER> Sets the table border thickness. The default value is border=0 (no border)

<CELLSPACING> Defines the distance a cell frame is from the edges of the object within the frame. The default is cellpadding=1.

<WIDTH> Specifies the desired width of the table in pixels or percentages.

<HEIGHT>Specifies the desired height of the table in pixels or percentages. These attributes can only be used with the <TR>, <TD> and <TH> TAGS.

<ALIGN> Specifies the alignment of text or graphics within the cell. Values are align=left, align=right or align=center. The default is align=left.

<VALIGN> Specifies the vertical alignment of text or graphics within the cell. Values are valign=top, valign=bottom, valign=middle or valign=baseline. The default is valign=middle.

These attributes can only be used with the <TD> and <TH> TAGS.

<WIDTH> Specifies a width (which affects all the cells in that column) for the element in pixels or as a percentage of the screen. If more than one cell uses the width attribute, the widest cell setting will be used (Note: if the total of the widths specified exceeds that specified in the width attribute of the <TABLE> tag, the table tag width will be overridden).

<HEIGHT> Specifies a height (which affects all the cells in that row) for the element in pixels or as a percentage of the screen. If more than one cell uses the height attribute, the tallest cell setting will be used. (Note: if the total of the heights specified exceeds that specified in the height attribute of the <TABLE> tag, the table tag height will be overridden).

<COLSPAN> The number of columns that the cell spans.

<ROWSPAN> The number of rows that the cell spans.

<NOWRAP> The text wrapping feature is disabled.

Now that we have a basic understanding of TABLES, let’s take a look at a simple 2 column table which will be constructed a column at a time. we start with the first column:

<TABLE BORDER=4>
<TR>
<TH ALIGN=CENTER>US STATE</TH>
</TR>
<TR>
<TD>Alabama</TD>
</TR>
<TR>
<TD>Alaska</TD>
</TR>
<TR>
<TD>Arizona</TD>
</TR>
<TR>
<TD>California</TD>
</TR>
<TR>
<TD>Colorado</TD>
</TR>
</TABLE>

Now that we have the first column built, its time to add a second. To build the second column, all you would do is just build on the first.

<TABLE BORDER=4>
<TR>
<TH ALIGN=CENTER>US STATE</TH>
<TH ALIGN=CENTER>AREA CODE</TH>
</TR>
<TR>
<TD>Alabama</TD>
<TD>205</TD>
</TR>
<TR>
<TD>Alaska</TD>
<TD>907</TD>
</TR>
<TR>
<TD>Arizona</TD>
<TD>480</TD>
</TR>
<TR>
<TD>California</TD>
<D>209</TD>
</TR>
<TR>
<TD>Colorado</TD>
<TD>303</TD>
</TR>
</TABLE>

Now that you have learned the basics, let’s see if we can't fine tune your table a little. It’s fairly easy to change the way your table looks on your web page. You can change the size and the color, specify a border size, and add space between the table cells. You determine all of these things by using several different attributes in your TABLE TAG. (WIDTH, BGCOLOUR, CELLPADDING, CELLSPACING, BORDER) Use the WIDTH attribute inside the TABLE TAG to specify how much of the screen you want your table to span. You can use a percentage or pixels for the value. BGCOLOUR in a table works the same as the BGCOLOUR attribute in the BODY TAG. Use the colors name or its hexadecimal code. CELLPADDING and CELLSPACING will let a little air into your table and make it easier to view. CELLSPACING is the amount of space you want between your table cells. CELLPADDING is how many pixels of space you want on the inside of your cell between your text and the border. Finally you can also control the thickness of your table border by using the BORDER attribute.

Below is an example of what our previous table would look like with all the attributes we just talked about.

<TABLE WIDTH=50% BGCOLOUR=ORANGE CELLPADDING=5 CELLSPACING=5 BORDER=4>
<TR>
<TH ALIGN=CENTER>US STATE</TH>
<TH ALIGN=CENTER>AREA CODE</TH>
</TR>
<TR>
<TD>Alabama</TD>
<TD>205</TD>
</TR>
<TR>
<TD>Alaska</TD>
<TD>907</TD>
</TR>
<TR>
<TD>Arizona</TD>
<TD>480</TD>
</TR>
<TR>
<TD>California</TD>
<TD>209</TD>
</TR>
<TR>
<TD>Colorado</TD>
<TD>303</TD>
</TR>
</TABLE>