Tables

In the next few minutes, I will show you how to do some simple stuff with tables!

Before I explain this table to you, here's the code I wrote to give me the table:

<TABLE>
<CAPTION>Veggies!</CAPTION>

<TR>
<TD>Green Beans</TD>
<TD>Corn</TD>
<TD>Cucumber</TD>
</TR>

<TR>
<TD>Lettuce</TD>
<TD>Squash</TD>
<TD>Celery</TD>
</TR>

<TR>
<TD>Onion</TD>
<TD>Asparagus</TD>
<TD>Carrots</TD>
</TR>

</TABLE>

Now, don't be worried by this. It looks strange, but look again. There's only 4 commands being used over & over. Here's what we use:

<TABLE> starts and ends the whole thing.

<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 start. Notice that you need to end every table row with an </TR>. See that above?

<TD> denotes Table Data. This goes in front of every piece of information you want in a cell. You need to end every one that you open with a </TD>. See how it's done above.

And finally you finish with </TABLE>.

Now some more stuff to do with tables!

Here's the same table we worked with before but with more code added.

<TABLE CELLSPACING="1" CELLPADDING="1" BORDER="3">
<CAPTION>Veggies!</CAPTION>

<TR>
<TD>Green Beans</TD>
<TD>Corn</TD>
<TD>Cucumber</TD>
</TR>

<TR>
<TD>Lettuce</TD>
<TD>Squash</TD>
<TD>Celery</TD>
</TR>

<TR>
<TD>Onion</TD>
<TD>Asparagus</TD>
<TD>Carrots</TD>
</TR>

</TABLE>

Now, you're using the 3 new commands listed below :

CELLSPACING (all one word) gives the amount of space between cells.

CELLPADDING (all one word) gives the amount of space (or padding) between the cell border and the cell contents. Note the cell border walls tend to fill out. A higher number fills out more. Try a few different settings to see what looks best.

BORDER tells the table how large the border should be. This is in terms of pixels. Try different numbers. I happen to like the look of BORDER=3. BORDER=0 gets rid of the borders altogether.

Now, we'll go into more uses for the table, including, not only entire page design/layout, but color as well.

For starters, let's take a look at a regular table:

<TABLE BORDER="0">
<TR><TD>
</TD></TR></TABLE>

Now, if you want the background color of your whole table to be the same, you'd put the code within the start tag, like so:

<TABLE BGCOLOR="#FFFFFF">

Same thing with a background image:

<TABLE BACKGROUND="image.gif">

Now, if you just want to color one cell, you'd do this:

<TABLE BORDER="0">
<TR><TD BGCOLOR="#FFFFFF">
</TD></TR></TABLE>

Or, for a one celled background image:

<TD BACKGROUND="image.gif">

With the TD attributes, you can have every cell be a different color or background image. With this in mind, you can use tables in your whole page design & layout.

I hope this tables tutorial has been helpful. Happy table building!