Back to Home Page Back to Main HTML Page


TABLES


There are five fundamental tags used in building tables. They are: <TABLE>, <TR>, <TH>, <TD>, and <CAPTION>.

<TABLE> and </TABLE>

The first tag to learn is the <TABLE> tag. It is used to notify browsers that you are about to display a table. When you have finished with your table, you use the </TABLE> tag to indicate that you are done.

There are a few ways you can modify the <TABLE> tag. It can include information about the width of the table, the thickness of the table's borders, the table's background color, and the color of the table's borders. These last two modifiers are not supported in all browsers. Here's a sample <TABLE> tag utilizing all four modifiers:

<TABLE WIDTH=75% BORDER=2 BGCOLOR="993366" BORDERCOLOR="black">

OR:

<TABLE WIDTH=400 BORDER=0 BGCOLOR="red" BORDERCOLOR="0066CC">

<TR> and </TR>

Now that you've described some general characteristics of your table, it's time to add some actual data, pictures, text - whatever your table will be holding. HTML organizes tables into rows of information - you need to indicate specifically every time you wish to start and end a new row. A row is a horizontal collection of boxes of information - each box is called a "cell." At the beginning of each row, you will use the <TR> (short for "Table Row") tag, and at the end of each row, you'll use the </TR> tag.

Rows can be modified in only a few very specific ways. You can determine the horizontal and vertical alignment of the elements the row contains, using the <ALIGN> and <VALIGN> keywords. A sample row tag might look like this:

<BR ALIGN=LEFT VALIGN=BOTTOM>

OR:

<BR ALIGN=CENTER VALIGN=MIDDLE>

The descriptors available to modify horizontal alignment (using the <ALIGN> keyword) are LEFT, CENTER, and RIGHT.

The descriptors available to modify vertical alignment (using the <VALIGN> keyword) are TOP, MIDDLE, BOTTOM, and BASELINE.

Dont' worry - we're almost at the point where we can make something that you can see. If you forget everything - don't worry - you can re-read it later, when it should make sense.

<TD> and </TD>

Well, we've got rows, but so far nothing is in them. I mentioned "cells" before - individual boxes that contain information. Let's look a simple table - one with three cells, all in one row. Each cell is surrounded by the <TD> tags - TD is short for "Table Data."

First, the HTML:
<TABLE BORDER=3>
<TR>
<TD>
Cell #1</TD>
<TD>
Cell #2</TD>
<TD>
Cell #3</TD>
</TR>
</TABLE>

And now, the actual table:
Cell #1 Cell #2 Cell #3

Not much to look at, but it's a start. We can make the table take up the whole width of the screen by changing the line that says <TABLE BORDER=3> and making it say <TABLE BORDER=3 WIDTH=100%>, instead. Here's what that table would look like:
Cell #1 Cell #2 Cell #3

An important thing to know is that you can really go nuts modifying the appearance of each cell. You can control the background color of the cell (BGCOLOR=xxxx), the height of the cell (HEIGHT=xxxx), the width of the cell (WIDTH=xxxx), and both the horizontal and vertical alignment of the contents of the cell (ALIGN=xxxx and VALIGN=xxxx). Note that ALIGN can be set to equal LEFT, CENTER, or RIGHT. Similarly, VALIGN can be set to equal TOP, MIDDLE, or BOTTOM.

Something to keep in the back of your mind when you use the <TD> tag is that by default, the contents of the cells will be displayed using LEFT and MIDDLE. If you like these settings, you don't need to use the ALIGN and VALIGN modifiers.

To summarize, here's a table that uses some of these new modifiers. I've made it more complex by adding a second row, but otherwise it sticks to the same principles that we used in the earlier, simpler table. First, the HTML:
<TABLE BORDER=6 WIDTH=90%>
<TR>
<TD BGCOLOR=white>
Cell #1</TD>
<TD ALIGN=CENTER>
Cell #2</TD>
<TD HEIGHT=100 ALIGN=RIGHT>
Cell #3</TD>
</TR>
<TR>
<TD WIDTH=50% VALIGN=bottom>
Cell #4</TD>
<TD HEIGHT=150 BGCOLOR=gray ALIGN=LEFT>
Cell #5</TD>
<TD VALIGN=TOP>
Cell #6</TD>
</TR>
</TABLE>

And now, the table. See if you can explain why each cell looks the way it does:
Cell #1 Cell #2 Cell #3
Cell #4 Cell #5 Cell #6

The thing that may surprise you at first is the width of cell #1 and the height of cells #4 and #6. After all - we specified that cell #4 should take up 50% of the width of the table - we didn't say anything about the width of cell #1, did we? In fact, HTML is smart enough to realize that the right hand side of cell #1 lines up with the right hand side of cell #4, so if cell #4 is 50% wide - well, then, cell #1 must also be 50% wide. Similarly, cells #4, 5, and 6 all share the same top and bottom lines, so if one of them is 150 pixels tall (as we indicated for cell #5), then they must all be 150 pixels tall.

<TH> and </TH>

The next fundamental tag is the <TH> tag - it stands for "Table Heading." It's another way to create individual cells. Everything about it works the same as the <TD> tag, except for two things:

  1. The text inside of a <TH> tag is automatically made bold.
  2. The contents of a <TH> cell are horizontally aligned to the center, by default (<TD> was to the left, by default)
Obviously, it's used to create cells that will contain headings.

A final example using these 4 fundamental tags. First, the HTML: <TABLE BORDER=1 WIDTH=75%>
<TR>
<TH><FONT COLOR=red>
Expenses</FONT></TH>
<TH>
March</TH>
<TH>
April</TH>
<TH>
May</TH>
</TR>
<TR>
<TH>
Required</TH>
<TD>
$150</TD>
<TD>
$125</TD>
<TD>
$260</TD>
</TR>
<TR>
<TH>
Entertainment</TH>
<TD>
$85</TD>
<TD>
$three hundred</TD>
<TD>
$50</TD>
</TR>
<TR>
<TH>
TOTAL</TH>
<TD>
$235</TD>
<TD>
$425</TD>
<TD>
$310</TD>
</TR>
</TABLE>

And the resulting table:
Expenses March April May
Required $150 $125 $260
Entertainment $85 $three hundred $50
TOTAL $235 $425 $310

I wrote out $300 in text so you could see that information inside a <TD> tag isn't automatically bolded.

<CAPTION> and </CAPTION>

This is the last of the five basic tags used in creating tables. It's used for titles - it automatically spans the entire table, no matter how many cells wide (or high) it is. In the previous table, we stuck the title of the table ("Expenses") up in the top left hand corner. A more attractive way to display that table might have been with the following HTML:
<TABLE BORDER=1 WIDTH=75%>
<CAPTION>
Expenses</CAPTION> <TR>
<TH></TH>
<TH>
March</TH>
<TH>
April</TH>
<TH>
May</TH>
</TR>
<TR>
<TH>
Required</TH>
<TD>
$150</TD>
<TD>
$125</TD>
<TD>
$260</TD>
</TR>
<TR>
<TH>
Entertainment</TH>
<TD>
$85</TD>
<TD>
$three hundred</TD>
<TD>
$50</TD>
</TR>
<TR>
<TH>
TOTAL</TH>
<TD>
$235</TD>
<TD>
$425</TD>
<TD>
$310</TD>
</TR>
</TABLE>

And the resulting table would have looked like this:
Expenses
March April May
Required $150 $125 $260
Entertainment $85 $three hundred $50
TOTAL $235 $425 $310

The CAPTION tag automatically centers the caption above the rest of the table. Some browsers keep the caption outside of the border surrounding the rest of the table, others include it inside that border - either way, it's clear that it is a title, and doesn't contain data like the other cells in the table.

You'll notice that the cell that is now in the upper left-hand corner is now empty, but the HTML still mentions it - there are still <TH> and </TH> tags to indicate that an empty cell belongs there. If you forget to indicate the empty cell, your table will look distorted and you won't know why.

There is one modifier available for the <CAPTION> tag - you may add the modifier ALIGN=xxxx, and ALIGN may be set equal to either TOP or BOTTOM. The default position is across the top of your table, but by changing the <CAPTION> tag to read <CAPTION ALIGN=BOTTOM>, the caption would be displayed along the bottom of your table.

A still better way to display this table might be to improve the formatting of the word "Expenses." That's simple to do - we change the line that currently reads:
<CAPTION>Expenses</CAPTION>
to read like this:
<CAPTION><FONT SIZE=5 COLOR=red>Expenses</FONT></CAPTION>

Assuming we keep the rest of the table the same, the result would look like this:
Expenses
March April May
Required $150 $125 $260
Entertainment $85 $three hundred $50
TOTAL $235 $425 $310

Obviously, we could go on like this forever, modifying captions, rows, and even individual cells until we were blue in the face. For now, I'm going to assume that if you need to create a basic table, you're all set - these five basic tags and their many modifiers should get you through most situations.

There are, of course, additional tags that you can use to make your tables more attractive and useful. You can review those in the section of this primer entitled "Advanced Tables."



Back to Top of Page Back to Main HTML Page Back to Home Page

Last Updated: