Okay, here's a couple of standard tables:

You immediately notice something: you only see the pretty 'bevelled boxes' if you've put something in them; in table 2, three cells are empty, so you just see blank space. Just remember that when you're designing.

Okay, the HTML for a table (the first example above) is as follows: NOTE: DO NOT COPY AND PASTE this code!!! If you do, you'll get strange results because there are invisible characters and so on here that aren't important for you to know. To get some table-code to copy and paste, click here.

<TABLE BORDER="4" CELLPADDING="0" CELLSPACING="2" WIDTH="200">

<TR>
<TD>Stuff</TD>
<TD>More stuff</TD>
<TD>Added things</TD>
</TR>

<TR>
<TD>Ranting</TD>
<TD>Raving</TD>
<TD>Arguing</TD>
</TR>

<TR>
<TD>More things</TD>
<TD>Bits</TD>
<TD>Pieces</TD>
</TR>
</TABLE>

Okay, let's explain the tags now:

The <TABLE> and </TABLE> tags obviously mark the beginning and end of the table code. Duh.

The <TR> and </TR> tags mark the beginning and end of each *ROW* of the table. Think "TR" = "Table Row".

The <TD> and </TD> tags mark the beginning and end of each *CELL* of the table.

It's important to see that your HTML for the table works from left-to-right along the top row of the table, then left-to-right along the next row, and so on.

NOTE: Each cell's contents are left-aligned by default. To center the text in, for example, the first cell:

<TD><CENTER>Stuff</CENTER></TD>

You now need to know what all that BORDER="4" CELLPADDING="0" CELLSPACING="2" WIDTH="200" stuff inside the <TABLE> tag means.

BORDER sets the thickness of the table's border. Note that a value of 0 makes the table invisible; this is good for flowing text into columns invisibly. Here are a few examples of one-cell tables with different BORDERs:

CELLPADDING sets the amount of space between the edges of a cell and the cell's contents. Examples:

CELLSPACING sets the amount of space between adjacent cells; i.e. the thickness of the 'dividing lines' between cells. Here are some two-cell tables as examples:

WIDTH obviously sets the width of the whole table, in pixels. No examples needed for that one. ;-)

That's it, really. I think that's enough to get you started with tables. Below is some table-code to copy and paste, for your convenience.

<TABLE BORDER="4" CELLPADDING="0" CELLSPACING="2" WIDTH="200">
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>




























































































































Back to HTML Basics