Tables, unfortunately, are a little more complicated than just about everything else we've done so far. Don't worry, that doesn't mean they're hard, it just means they're complicated.

The basic tags that these monsters use are the TABLE tag, with ALIGN, HEIGHT, WIDTH, BORDERCOLORLIGHT BORDERCOLORDARK, BORDER, CELLSPACING, BGCOLOR, AND CELLPADDING attributes; the TR [table row] tag; and the TD [table cell] tag, which has some attributes of its own, which we shall get into later. The most important thing to remember right now is that the tags must be placed in that order. If you don't place them properly, your page will be a big ugly mess, and you don't want that. Or, I hope you don't want that.

To start with, lets lay down the structure of a two-row table, so you can see just how they work.

<TABLE>
<TR>
<TD>
This is the first cell, top left.
</TD>
<TD>
This is the second cell, top right.
</TD>
</TR>
<TR>
<TD>
This is the third cell, bottom left.
</TD>
<TD>
This is the fourth cell, bottom right.
</TD>
</TR>
</TABLE>

I'll be addressing most of the attributes in a supplementary section, but let me just say this about tables: they can be really, really ugly. This entire tutorial has taken place inside tables, but I made them look pretty decent by changing the colours around and getting rid of some of the default attribute settings. If you think your tables are lookin' kind of ugly, then you can make them invisible [the cool thing about that is that they work even though you don't get to see them] by setting the BORDER attribute to "0" [zero]. The BORDER for the tables on this site is "3".

You can use tables to control the layout of your site, make pictures move even more accurately to where you want them to go, and so on, and so on, and so on. Like just about all aspects of HTML, the more versatile the element the more coplex its code. More about tables....