general tips>
text>
tables>
images>
backgrounds>
links>
other tips>
home>

The power of TABLES.

It's hard to know where to begin with tables. Almost every page you see today has some sort of table in it. If you've ever seen a page that has columns of information side-by-side, you've seen tables. If you've seen a page that is just a big list of information, well you've probably seen one without tables. Almost every page I make is full of tables. Even the page you're looking at right now is one big table. This page is made up of a table with three cells. The menu on your left is one cell, this main body is another cell, and the border on the right is the third cell.

There are three main tags for tables. They are:
<TABLE> This is the basic tag for any table. Every table begins and ends with this tag. There are many options for a table which will be discussed more in depth below.
<TR> This indicates the start of a row. You always start the rows first, and this tag must be closed.
<TD> This tag indicates the start of a column. You can have multiple <TD> tags within each row, but each must be closed just like the rows. There are options that can be included in here as well.
See, even the list above was a table!

There are several options you can give a table. They are:
(1) WIDTH in pixels or percent. For example:<TABLE WIDTH="100"> would give a table 100 pixels wide.
(2) HEIGHT in pixels or percent, just like WIDTH.
(3) BORDER in pixels. This is just like it sounds - the border around your table.
(4) CELLSPACING in pixels. This is the amount of space between each of the cells in the table.
(5) CELLPADDING in pixels. Similar to CELLSPACING, this is the space from the edge of the cell to its contents.
(6) BGCOLOR - background color. Just like with font color, this can by almost any color imaginable.

There are many more, but we'll leave it at that for now. I'm not sure what all exactly to get into here, because tables are so versatile, I could almost have an entire site just on them! The best thing is probably just to do some examples. First, I'll show you how I did the basic setup for these pages, with the two borders. The code for this is:

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2" WIDTH="100%" HEIGHT="100%">
  <TR>
    <TD VALIGN="TOP" BGCOLOR="#2F4F4F">

     (in here I put the code for the menu)

    </TD>
    <TD VALIGN="TOP" WIDTH="95%">

     (this is the main body)

    </TD>
    <TD VALIGN="TOP" WIDTH="5%" BGCOLOR="#2F4F4F">
    </TD>
  </TR>
</TABLE>


And that's ALL there is to it! Let me explain what each tag does. First of all, notice that all of the TABLE, TR, and TD tags begin and end. Your page will have all kinds of issues if you forget to end one of these tags. If we look at the initial TABLE tag, you can see I set it to have a border of 0, because I don't want the viewers of this page to actually notice that it's a table their looking at. Tricky, eh? Then, you can see that I've got the cellspacing set to zero, but the cellpadding set to 2. I've set the cellpadding this way so when text is entered in a cell like this main body cell, it's not flush up against the side. If you look really closely at some of the text in this cell, you can see that it isn't right up against the left border. It's actually 2 pixels away. The last two variables I've set in the TABLE tag are the height and width. I've got them both set to 100%, so the table fills the entire page. Notice that even though there is more than one page's worth of information, it doesn't cram it all into one page. The 100% is the minimum size the table will be.

If we take a look at the TD tag, you can see I've got a couple of different variables I'm setting there. The first is the VALIGN, or vertical alignment. I want the menu in the left cell, (which is also a table) to be at the top of the page, so I set VALIGN="TOP". Also, for the left and right borders, I've got the background color set as a darker color than the middle using the BGCOLOR="#2F4F4F". The last thing you can see is the WIDTH variable in the two cells. It doesn't seem to make sense that the middle cell (the main body) is 95% of the page, and the right border is 5%. What's left for the left menu, right? Well, all this means is that the left cell with the menu will go to whatever size fits the menu table, and the remaining two cells will fill 100% of what is left over.

Well, that concludes my short tutorial on tables. There is much more I could go over, but I think it's a little out of the scope of this small page. With the information on this page, you should be able to get a pretty good grasp on what tables can do for your web pages.