{- BACK -}

      This is intended to be a tutorial by example of Tables. This covers most of the new tags in tables, though it doesn't necessarily show some of the really creative capabilities available in tables. Have fun, and thank you for visiting, Bruce's Web Page Help!

<TABLE>
contents of table.......
</TABLE>

      The <TABLE> tag begins the table, you place what you want inside, and end the table with the </TABLE> tag. To begin adding contents to your table, you will need the <TD> tag. The "TD" stands for table data, which is what you will place after this tag. You end a table data section with the </TD> tag. Here is a basic table with just one cell:

<TABLE>
<TD>
This is my table!
</TD>
</TABLE>

The table will turn out like this:

      What? No border? Don't worry, to get the border we just add the border command to the <TABLE> tag, like this:

<TABLE border="2">
<TD>
This is my table!
</TD>
</TABLE>

And now the table has the border around it:

      You can set the border to be as big or small as you like by changing the number inside the quote marks. If you set it to border="0", you will have a table with no border around it.

      Of course, you probably want the table to have more than one cell in it. To add another cell on the same line, just use the <TD> tags again, like this:

<TABLE border="2">
<TD>
This is a cell
</TD>
<TD>
This is a cell
</TD>
</TABLE>

And now we have two cells:

      Well, what if you want to go to the next line, or in table terms, the next row? To do this, you use the table row tags, <TR> and </TR>:

<TABLE border="2">
<TD>
This is a cell
</TD>
<TD>
This is a cell
</TD>

<TR>
<TD>
This is the new row
</TD>
<TD>
I'm on the new row, too!
</TD>
</TR>
</TABLE>

Now there are two rows, each with two cells:

      There are a couple of commands you can add to the <TABLE> tag to get more spacing between cells. Here they are:

cellspacing=" "   Use this command to add more space around each cell. Place a number inside the quote marks.

cellpadding=" "   Use this command to add more space inside each cell. Place a number inside the quote marks.

      I'll show you an example of both of these now. Let's say we added the cellspacing command to our last table, and set it to equal 12, like this:

<TABLE border="2" cellspacing="12">

Now the table would look like this:

Now, suppose we used the cellpadding command, and set it to 12, like this:

<TABLE border="2" cellpadding="12">

Now the table looks like this:

And of course, you can use both at once:

<TABLE border="2" cellspacing="15" cellpadding="15">

      You can add just about anything you would like inside the cells. You can add links, images, headings, paragraphs and more.

To put a link inside a cell, just place the link tag inside your <TD> tags, like this:

<TABLE BORDER="2">
<TD>
<A HREF="..">My Favorite Web Site!</A>
</TD>
</TABLE>

Now you will have a link inside your cell:

To place an image inside a cell, you will need to use the image tag:

<TABLE BORDER="2">
<TD> <IMG SRC="idiot2.gif" ALT="Idiot" width=97 height=128> </TD>
</TABLE>

      You may have noticed everything is aligned to the left side of each cell. This is the default setting. In the next section we will cover how to change the alignment of your cell contents, make cells stretch across more than one column or row, define a table width, and change cell background colors. Now, let's move on to Tables 2: Alignment, Color, and More.