As I said before, there are infinite uses for tables. On this page, however, I am going to attempt to show you five of the most common ones. After that, just be creative!

The first and primary use for a table is, of course, to simply organize data. Suppose you are making a webpage on marine life and you want to put up several photographs of fish. You decide to show your viewer several thumbnails of the photographs, which they could then click on to see the full picture. A great way to organize the thumbnails would be in a table. So, assuming you had six pictures, you might make a table with two rows of three cells each. In each cell, you would place one picture thumbnail. (You'd have to create the thumbnails in an image editor or else specify miniature dimensions for the image in the image's code. See my tutorials on images.) Then you'd link the thumbnail to the full picture. The entire code might look something like this:
<TABLE BORDER=5>
<TR>
<TD><A HREF="imagename.ext"><IMG SRC="thumbnailimagename.ext" BORDER=0></A></TD>
<TD><A HREF="imagename.ext"><IMG SRC="thumbnailimagename.ext" BORDER=0></A></TD>
<TD><A HREF="imagename.ext"><IMG SRC="thumbnailimagename.ext" BORDER=0></A></TD>
</TR><TR>
<TD><A HREF="imagename.ext"><IMG SRC="thumbnailimagename.ext" BORDER=0></A></TD>
<TD><A HREF="imagename.ext"><IMG SRC="thumbnailimagename.ext" BORDER=0></A></TD>
<TD><A HREF="imagename.ext"><IMG SRC="thumbnailimagename.ext" BORDER=0></A></TD>
</TR>
</TABLE>

So, there's one use. Then there's a much simpler use, and that is simply that of a picture frame. You can see an example of a picture frame table if you look on my home page; the image at the top has a border around it. This is a very simple code.
<TABLE BORDER=x><TR><TD>
<IMG SRC="imagename.ext">
</TD></TR></TABLE>
Just substitute x for the width of the border you want. That's all!

After this, it starts to get a little complicated. You will find yourself using tables often to format your webpages, and one of the best uses is to keep the content of your website on the blank part of a border background (a background like the one on this page now. In fact, if you look at the code for this page, you will see an example of what I'm talking about.) The first thing you will have to do is open your background image in an image editor and find out the width of the picture part of the background. Then, you'll have to download the following invisible .gif (called a vspacer) and upload it to your webpage account. (Notice I've used a table to outline the .gif!)

After you've got the image, just put the following code on your webpage, just under your "body" tag and before you put any other page content:
<TABLE BORDER=0><TR><TD><IMG SRC="invis.gif WIDTH=xx"></TD><TD>
Substitute the width of the image on your border background for the x's, then type the rest of the content of your page. Before you place the final "body" tag, insert the following:
</TD></TR></TABLE>
You will have basically enclosed your entire webpage in an invisible table with two cells. The first cell will contain only the image on your border background (actually it also contains that invisible .gif image, but since its invisible, it doesn't really matter and you can see right through it to the background beyond). The second cell contains the rest of your webpage's content.

This next application builds on the previous one. If you can use invisible tables to divide your webpage up into two sections, then there is nothing to stop you from placing even more content than that invisible .gif in the first cell. You can see an example of what I'm talking about here on my Tolkine page. Basically I made a border background with a blank border, then placed there the content on the left-hand side of the page. You may notice, if you look at the code, that I placed a little cell padding in the table to keep the content of the cells from spilling over on the white strip of border itself. (You can also see here an application of the link code I talked about in my "Links" tutorial, that allowed you to link a page to another section of the same page.) This is basically a kind of simple frame that doesn't involve Java script. (Which I haven't learned yet.) You may have to play around with formatting a little bit before it will work on your website, but it's not that hard. At least, on this application.

Now, this last application is, I will not pretend, incredibly difficult. I did not even write the code for this one myself; I used a template from another website. Basically, this is the code used for creating an image border around the content of your website using tables. You can see what I'm talking about here. Now, take a look at the code. Like I said, it's complicated. But basically, the idea is still the same; a table (or several tables, actually) with no borders and no spaces between cells. Each cell contains part of the picture you see, as well as the actual text of the website. The key in writing code on this level is not to give up. It took my ages to get everything worked out on this page, even working from a template and just formatting it to suit my page. Go through the code, line by line, even if it takes forever, and be sure you know what each tag does. If you can't figure out what its purpose is, take that part of the code out and then see what's missing. If nothing changes, the tag may be pointless (you'd be surprised how many purposeless tags can slip in when working with tables) and you can leave it out, making the code easier to read.

So, now you know just about everything you need to know to get started on your own website. Good luck, and have fun! Please email me with any questions or if you find anything confusing--I'll be glad to help!