Tables are one of the trickier aspects of HTML and web-design, but once you have mastered them, you will realize the creative freedom that you gain and you won't be able to go without them. The current layout of AAA HTML would have not been possible without the use of tables.

Although tables were originally meant for listing information in an organized manner, experienced designers use tables to control the layout of a website. AAA HTML is a good example of what is possible to achieve with table formatting techniques.

Basic table

<TABLE BORDER=1> <TR>   <TD>First Cell</TD>   <TD>Second Cell</TD> </TR> <TR>   <TD>Third Cell</TD>   <TD>Fourth Cell</TD> </TR> </TABLE>

First Cell Second Cell Third Cell Fourth Cell

DESCRIPTION: This is one of the most basic tables you can create. The <TABLE> is the opening tag, while BORDER=1 is an attribute which specifies a border of a certain width around the table. <TR> tells the browser that a new TABLE ROW is starting and is placed inside the <TABLE> tags. Inside the TABLE ROW, you can have as many TABLE CELLS as you want, which you call up with the <TD> command.

<TABLE> Attributes
BORDER=#	adds a border of a certain width around the table and cells
WIDTH=# or %	specifies the width of the table, can be a number (#) or a percentage (%)
CELLSPACING=#	specifies thickness of cellspacing
CELLPADDING=#	specifies the thickness of cellpadding
BGCOLOR=colour	specifies the background colour of a table or a table cell; you may use the name of a colour (such as red, blue, green or a color code (such as #552921)
BACKGROUND=image name	specifies an image to be displayed as the background of a table or a table cell

Combining these attributes, you can create all kinds of tables for various purposes. Don't forget that inside every cell, you can manipulate text, add images or even create new tables (nested tables). Below is an example.

Advanced Table

<TABLE BORDER=2 CELLSPACING=4 CELLPADDING=3 WIDTH=100% BGCOLOR=aqua> <TR>   <TD BGCOLOR=brown COLSPAN=4> <CENTER><FONT COLOR=white SIZE=5><B>FRUITS</B></FONT> </CENTER></TD> </TR> <TR>   <TD WIDTH=50% BGCOLOR=yellow ALIGN=center COLSPAN=2> <B>APPLES</B></TD><TD WIDTH=50% BGCOLOR=orange ALIGN=center COLSPAN=2> <B>ORANGES</B></TD> </TR> <TR>   <TD WIDTH=25%><I>red</I></TD><TD WIDTH=25%><I>green</I></td><TD WIDTH=25%><I>sweet</I></td><TD WIDTH=25%><I>sour</I></td> </TR> </TABLE>

FRUITS APPLES ORANGES red green sweet sour

You might think this is a little complicated, but it's easier than it looks, especially if you have tried it a couple of times. Don't let tables intimidate you because once you have mastered them, you will be able to really go crazy with them and do some really neat stuff.