Tables are useful for a variety of things. For example, tables can be used to line up materials vertically or horizontally, make creative layouts or to place text besides graphics.

In order to create a table we use the <TABLE> tag with the corresponding ending tag </TABLE>. Here is how it will look:

<TABLE>
</TABLE>

A table mainly consists of rows and columns, but can also contain headers, footers, headings and captions.

Suppose we wanted to create a table that lists all the names and addresses of people living on Main Street. This table will consist of two columns, one for the name and one for the address. Each row will contain one person and their address. We will first look at how to add the rows.

In order to create rows in a table we use the tag <TR> for "table row" and the corresponding ending tag </TR>. For our example, we want to include the names and addresses of 3 people living on Main Street. Here is how we would do it:

<TABLE>
<TR>Person 1's Name and Address</TR>
<TR>Person 2's Name and Address</TR>
<TR>Person 3's Name and Address</TR>
</TABLE>

Here is what our table looks like so far:

Person 1's Name and Address

Person 2's Name and Address

Person 3's Name and Address

Next we need to add the columns to each row so each person's name and address will appear in a row.

To create columns we use the tags <TD> and </TD>. The data belonging in each column for that row will go between the two tags. For our example, we need to create two columns in each row, one for the name and the other for the address.

<TABLE>
<TR><TD>John Doe</TD><TD>123 Main Street</TD>lt;/TR>
<TR><TD>Debbie Jones</TD><TD>327 Main Street</TD></TR>
<TR><TD>Dave Smith</TD><TD>783 Main Street</TD></TR>
</TABLE>

Here is what our example looks like so far:

John Doe	123 Main Street
Debbie Jones	327 Main Street
Dave Smith	783 Main Street

Next we will go over how to add headings to each of the columns.

To create a heading for each of the columns, the tags <TH> and </TH> are used. To add headings to our example, we need to create a new row at the beginning of the table. Instead of using the column tags inside of the row, we use the heading tags. This is how to add them to our example:

<TABLE>
<TR><TH>Heading for Column One</TH><TH>Heading for Column Two</TH></TR>
<TR><TD>John Doe</TD> <TD>123 Main Street</TD></TR>
<TR><TD>Debbie Jones</TD> <TD>327 Main Street</TD></TR>
<TR><TD>Dave Smith</TD> <TD>783 Main Street</TD></TR>
</TABLE>

After adding "Name" for heading one and "Address" for heading two, this is how the table would look:

Name	Address
John Doe	123 Main Street
Debbie Jones	327 Main Street
Dave Smith	783 Main Street

We can also add a caption or a title to our table. The caption is a title for the table, and it can go above or below the table. To add a caption, we use the tags <CAPTION> and </CAPTION> with our caption going in between the two tags. These tags will appear on the line immediately following the TABLE tag. Let's add a caption to our example:

<TABLE>
<CAPTION>Our Neighborhood</CAPTION>
<TR><TH>Heading for Column One</TH><TH>Heading for Column Two</TH></TR>
<TR><TD>John Doe</TD> <TD>123 Main Street</TD></TR>
<TR><TD>Debbie Jones</TD> <TD>327 Main Street</TD></TR>
<TR><TD>Dave Smith</TD> <TD>783 Main Street</TD></TR>
</TABLE>

Next we need to decide if the caption will be at the TOP or the table or at the BOTTOM. To do this we need to add the attribute ALIGN into the CAPTION tag. Supposing we want the caption at the bottom of the table our tag would look like <CAPTION ALIGN="BOTTOM">. And here is our example with the added caption:

Our Neighborhood

Name	Address
John Doe	123 Main Street
Debbie Jones	327 Main Street
Dave Smith	783 Main Street

You can put a border around the table by putting the attribute "BORDER=n" into the <TABLE> tag. N is the width of the border in number of pixels. For our example we would like to put a border around it that is 5 pixels in width. Here is how we would do that:

<TABLE BORDER="5">
<CAPTION ALIGN="BOTTOM">Our Neighborhood</CAPTION>
<TR><TH>Name</TH><TH>Address</TH></TR>
<TR><TD>John Doe</TD> <TD>123 Main Street</TD></TR>
<TR><TD>Debbie Jones</TD> <TD>327 Main Street</TD></TR>
<TR><TD>Dave Smith</TD> <TD>783 Main Street</TD></TR>
</TABLE>

And this is what it will look like:

Our Neighborhood

Name	Address
John Doe	123 Main Street
Debbie Jones	327 Main Street
Dave Smith	783 Main Street

We can also set the color of the border by using the attribute BORDERCOLOR. This is set equal to the color name or the color code. Refer to the color chart for some colors. Let's add a blue background to our example.

<TABLE BORDER="5" BORDERCOLOR="blue">
<CAPTION ALIGN="BOTTOM">Our Neighborhood</CAPTION>
<TR><TH>Name</TH><TH>Address</TH></TR>
<TR><TD>John Doe</TD> <TD>123 Main Street</TD></TR>
<TR><TD>Debbie Jones</TD> <TD>327 Main Street</TD></TR>
<TR><TD>Dave Smith</TD> <TD>783 Main Street</TD></TR>
</TABLE>

And here is what it will look like:

Our Neighborhood

Name	Address
John Doe	123 Main Street
Debbie Jones	327 Main Street
Dave Smith	783 Main Street

This page has been accessed

times since June 24, 2001