Below you will find a step-by-step guide that will walk you through the process of creating tables for your Web Site.

The Basic Table Commands

First things first. Here's the HTML I wrote to give me the Brady family table:

It looks rough, but look again. There are really only four commands being used again and again. Here's what we use:

• <TABLE> starts and end the entire thing. I think that makes perfect sense.
• <CAPTION> and </CAPTION> places a caption over your table. The caption will be bolded and centered.
• <TR> is used when you want a new Table Row to begin.
  Notice that you need to end every table row with an </TR>.
• <TD> denotes Table Data. You put this in front of every piece of information you want in a cell.
  You need to end every one that you open with an </TD>.
• </TABLE> ends the whole deal.

Explanation

What table commands do is create a series of cells. Each cell's data is denoted by the <TD> command.

Please note that even though the table above has each cell (or TD) command on a new line, the cells keep going to the right until you tell it that a new row of cells will start by using the <TR> or Table Row command.

Think of it as constructing a Tic Tac Toe board. You'll need nine cells for the board right? Three across in three rows. Use the <TD> command to make three cells across, use <TR> to jump to the next row, and so on until you have nine cells in three rows of three. Nothing to it.

Remember that what ever follows the <TD> command will appear in the cell. And the cells, by column, will be equal size using the largest cell as the model for the others.

Advanced Table Features

Now on to making the lines between cells. Here, again is that table above:

Ok, so I changed the names, but you get the idea. Below is the HTML I used to post this one. Please note that the commands are the same! All I did was add a few things inside of them

If it looks like all the work is done in the <TABLE> command - it is. You are using three commands to do the work for you:

• BORDER tells the table how large the border should be. This is all relative in terms of pixels. Three is larger than two and two is larger than one, etc. Try different numbers. I happen to like the look of BORDER=3. BORDER=0 gets rind of the lines all together.
• CELLSPACING (all one word) tells how much space you'd like between the text and the borders. I'd keep this kind of small. Large spacing tends to defeat the purpose.
• CELLPADDING (all one word) tells how much padding is required between each cell. Note the cell border walls tend to fill out. A higher number fills out more. Try a few different settings.

How about that new "ALIGN" in the <TD> command. I have told the <TD> command I want the data that follows centered within the cell walls outlined in the TABLE command above. Can you do other ALIGN types? Sure. Try ALIGN="left" and ALIGN="right". Use them in combination in different cells. Set one table cell to left. Set another table cell to center.

Activating Cells For Links

The commands are the same for this table except you place a link command after the <TD> command. Here's what the command for the upper left hand cell looks like:

<TD align = "center"><A HREF="http://www.howamazing.com">HowAmazing</A></TD>

     By the way, the BORDER, CELLSPACING, AND CELLPADDING commands are all set at 20 in the above table to give you an example of some larger numbers.

Images in Cells

Can I put images in each of the cells? Yes:

	<--See?
See?-->

All you have done is followed the TD command with an image command. Again, the command that creates the upper left hand cell is this:

<TD ALIGN = "center"><IMG SRC="clip.gif"></TD>

Framing Images

What you have done above is basically framed two images. A frame around one image is nothing more than a one-celled table. Here's a framed image: