Table Basics

Tables may seem very confusing at first but are simple once you get to grips with them. Take it from me, they're much easier to use than to explain!

There are three main tags for tables - TABLE, TR and TD. They all require closing tags, and work as follows.

The TABLE tag surrounds your entire table - put it at the start and end of all the other table tags.

TR is the tag for rows, so you'll have a set of TR and /TR tags for each row in your table (as many as you like).

TD is the tag for individual cells - these must go within TR tags, and you'll need the same number of cells in each row (unless you use spanning attributes which we'll look at later). The actual information that will appear in the table goes within the TD tags.

That's it - with those three tags you can create tables of all shapes and sizes.

Table Example

As usual, the easiest way to learn is to see some examples.

<TABLE>
<TR>
<TD>Row 1 Cell 1</TD>
<TD>Row 1 Cell 2</TD>
</TR>
<TR>
<TD>Row 2 Cell 1</TD>
<TD>Row 2 Cell 2</TD>
</TR>
</TABLE>

That code prodces the following table. Normally the border would not appear, but I've added it to make things clearer. You'll learn how to do this in a later section.

Hopefully things make sense now. You can put as many TD's (i.e. cells) within a row and as many rows in the table as you need.

You can put whatever you like within the TD cells - plain text, formatting tags, paragraphs, images, links - any standard HTML. Even tables - you can place a table within a table if required. Here's an example of this nesting technique:

<TABLE>
<TR>
<TD>Row 1 Cell 1</TD>
<TD>Row 1 Cell 2</TD>
</TR>
<TR>
<TD>Row 2 Cell 1</TD>
<TD>

<TABLE>
<TR>
<TD>Row 1 Cell 1</TD>
<TD>Row 1 Cell 2</TD>
</TR>
<TR>
<TD>Row 2 Cell 1</TD>
<TD>Row 2 Cell 2</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

As you can see, table columns and rows expand to allow for the largest data. If you want more control over the look of your table, you'll need to start using some attributes. Read on...