<TABLE> </TABLE>

Use these tags to start and stop a table. Within the opening tag you can set certain table formats. Use the format links to find what you want to see. Then use your BACK button if you want return to the format table.

BORDER=# (pixels) CELLSPACING=# (pixels) CELLPADDING=# (pixels) HSPACE=# (pixels) VSPACE=# (pixels)

BGCOLOR=xxxxxx WIDTH=# (% or pixels) HEIGHT=# (% or pixels) ALIGN=RIGHT ALIGN=LEFT

You can use any number of these options at one time, as long as they make logical sense together. You are the designer, you decide. In this code example, all options will be applied to the table. <TABLE BORDER=5 BGCOLOR=000066 HSPACE=25 VSPACE=25 ALIGN=RIGHT>

To center a table on the page, use the <CENTER> </CENTER> tags to enclose the whole table code.

We will apply each of these options to our table to see how they affect it.

<TR> </TR>

Starts and stops a new table row. When I am writing the table code, I like to put separate parts on separate lines. This helps me to review my code for editing. Notice how the TR tags are on their own lines in the code samples.

I have heard the closing tag is optional. You can get away with leaving it out in most situations, but it is necessary in certain situations. My rule is to always use the closing tag.

Within the table row tag you can set certain row formats, like:

ALIGN=RIGHT ALIGN=LEFT ALIGN=CENTER ALIGN=JUSTIFY BGCOLOR=xxxxxx

VALIGN=TOP VALIGN=BOTTOM VALIGN=MIDDLE WIDTH=# (% or pixels) HEIGHT=# (% or pixels)

<TH> </TH>

The table header tag automatically bolds and centers your text data in the cell. Really, it is another form of a TD tag, so it does need to be preceeded by the TR tag to start the header row. You can use the COLSPAN= option to designate how many columns this header should cover. You would use this option to group more than one column under one header.

<TD> </TD>

A single table data cell can contain anything from the complete Gettysburg Address to a single alpha or numeric digit. It can also contain graphics or other multimedia content.

Text and graphics in a data cell can be formated using the same common tags used on a plain page, like <B>, <I>, <FONT=>, etc.

These are some of the common format options you can use within the TD tag:

ROWSPAN=# (rows) ALIGN=RIGHT ALIGN=LEFT ALIGN=CENTER ALIGN=JUSTIFY BGCOLOR=xxxxxx

COLSPAN=# (columns) VALIGN=TOP VALIGN=BOTTOM VALIGN=MIDDLE WIDTH=# (% or pixels) HEIGHT=# (% or pixels)

---

Let's build a table!

I want to list some of my favorite motorcycles I have owned.

The favorite motorcycles I have owned are, a 69 Penton Berkshire 125cc, a 72 CZ MX 250cc, and a 77 KTM MC5 250cc.

We can make that a whole lot easier and more fun for our viewers to read if we put that data in a table like this.

My Favorite Motorcycles
Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

But first we will start with a basic table like the one below and then walk through the format options that will bring us to the result above.

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

Below is the HTML code used to create the basic table.

<TABLE>

<TR>
<TH>Year</TH> <TH>Make</TH> <TH>Model</TH> <TH>Size</TH>
</TR>

<TR>
<TD>69</TD> <TD>Penton</TD> <TD>Berkshire</TD> <TD>125cc</TD>
</TR>

<TR>
<TD>72</TD> <TD>CZ</TD> <TD>MX</TD> <TD>250cc</TD>
</TR>

<TR>
<TD>77</TD> <TD>KTM</TD> <TD>MC5</TD> <TD>250cc</TD>
</TR>

</TABLE>

Notice, in the table code above, how I separated logical groups, table rows, so my code will be easy to check and edit. When the table data is significantly bigger, I put each data cell on it's own line, but still grouped as a table row. Another thing you can do is indent your code, outline fashion, to help recognize sections. Neither of these styles of grouping will affect how your web page looks to your viewer.

Now we start adding the options.

<CAPTION> </CAPTION>

Place the CAPTION tag right after the opening table tag. Then type a few words to describe the table. The default alignment is above & center. You can use the ALIGN=BOTTOM option to place it below & center. For our motorcycle table I would put:

<TABLE>
<CAPTION><B>My Favorite Motorcycles</B></CAPTION>
<TR>

Table with caption, bold:

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

BORDER

The most common option used is the border. It adds a visible grid around each cell in your table. The BORDER=# (pixels) option is used within the opening TABLE tag to set the outside border width. Using the BORDER option without a number results in a default 2 pixel border.

There are some differences you should be aware of between the way MS Internet Explorer and Netscape Communicator interpret BORDER colors. Netscape seems to take on the color of the page background where MS IE takes on the color of the table background. In this example the border color drabs out the table in MS IE. In netscape it is a little bit cheerier because of the brighter border color.

Another thing that came up when the background color was changed in MS IE. The background color extended up into the caption area. That looked real sloppy with the border around the table, but not the caption, and the background color extending past the border and into the caption region. This happened on MS IE at work but not on MS IE at home.

If the BGCOLOR thing creeps up into your border region, you might be happier formatting the BGCOLOR in each row, TR, tag instead of in the TABLE tag.

I recommend cross checking your pages on both browsers if you are serious about publishing them on the Internet.

<TABLE BORDER>

<CAPTION><B>My Favorite Motorcycles</B></CAPTION>
<TR>
<TH>Year</TH>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

<TABLE BORDER=10>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

CELLPADDING

CELLPADDING=# (pixels) is an internal cell buffer, used to space the data within a cell away from the wall/border, visible or not. This helps to make your table more legible. CELLPADDING=0 is also useful.

<TABLE BORDER CELLPADDING=10>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

CELLSPACING

CELLSPACING=# (pixels) puts a buffer between the cells. With the BORDER option turned on, it looks like a wide grid throughout your table. You can also specify CELLSPACING=0.

<TABLE BORDER CELLSPACING=10>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

HEIGHT, WIDTH

HEIGHT=# (pixels) HEIGHT=#% (percent) You can specify the height of your table in either pixels or percent. Your table, however, can never be smaller than the data inside. In other words, if you have a 200x200 pixel image in your table, it will never be smaller than 200 pixels high or wide, even if you specified HEIGHT=100.

WIDTH=# (pixels) WIDTH=#% (percent) The width of your table can be specified in either pixels or percent (of available space).

<TABLE BORDER HEIGHT=250 WIDTH=400>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

When scaling your table to a percentage, it is helpful to know what it is a percentage of. You are specifying a percentage of the visible area in the current section you are working in. The reference area for these tables, which does not include the dark blue frame on the left or the indent area of this outline style list, is from the left edge of this paragraph to the vertical scrollbar on the right side of the window. Try this experiment. Reduce the size of your window. The table below scales down until it can't scale down past the size of the data because the visible area has shrunk.

You can also specify greater than 100% which will give you a wider page and cause a horizontal scroll bar to be added to your page. I hate that.

<TABLE BORDER HEIGHT=50% WIDTH=75%>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

ALIGN=RIGHT, LEFT, CENTER, JUSTIFY, MIDDLE

The ALIGN command can be used in the TABLE, TR, TH, or TD tags.

<TABLE BORDER ALIGN=RIGHT HEIGHT=200 WIDTH=350>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

In the TABLE tag, the ALIGN command is used to place the table on the left or right edge of the page. Even though the table default is left, without specifying ALIGN=LEFT or ALIGN=RIGHT you cannot word wrap text around the table or have anything else beside it in the same workspace. This works the same way the ALIGN command works with graphics.

In the TR, TH, and TD tags it is used to align the data in the cell(s).

In the example below, I have used all of the ALIGN commands in different context to show how each one works. Also notice how the more local the command, the more priority it has. If a whole row was right aligned in the TR tag, but one cell was left justified, that one cell would be left aligned while the rest of the row stays with the right alignment.

<TABLE BORDER ALIGN=LEFT HEIGHT=200 WIDTH=350>

<TR>
<TH>Year</TH> <TH ALIGN=LEFT>Make</TH> <TH>Model</TH> <TH>Size</TH>
</TR>

<TR ALIGN=RIGHT>
<TD ALIGN=CENTER>69</TD> <TD>Penton</TD> <TD ALIGN=MIDDLE>Berkshire</TD> <TD>125cc</TD>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

You probably wouldn't want to have this many alignment options in your table at the same time, but you could if you wanted to. That's what we are looking for, control.

The TH tag for Make was left aligned. The default for a TH tag is centered.

The whole row for the first motorcycle was right aligned, but 2 individual cells were center/middle aligned. That is a good example of local priority.

I think this table would look nice with all cells, including the headers, left aligned or center aligned.

VALIGN= TOP, BOTTOM, MIDDLE

The VALIGN option aligns your data in the cell as specified. If you specify VALIGN=TOP, then the data starts at the top of the cell. If you specify VALIGN=BOTTOM, then it would sit on the bottom of the cell. You can also use the VALIGN along side the ALIGN option to create combo formats like, top-right.

<TABLE BORDER HEIGHT=200 WIDTH=350>

<TR VALIGN=TOP>
<TH>Year</TH> <TH VALIGN=BOTTOM>Make</TH> <TH>Model</TH> <TH>Size</TH>
</TR>

<TR VALIGN=TOP ALIGN=RIGHT>
<TD VALIGN=BOTTOM ALIGN=RIGHT>69</TD> <TD>Penton</TD> <TD>Berkshire</TD> <TD>125cc</TD>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

HSPACE VSPACE

<TABLE BORDER HSPACE=20 VSPACE=20 ALIGN=LEFT HEIGHT=100 WIDTH=350>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

Note: I haven't been able to make this work in MS Internet Explorer yet.

HSPACE=# (pixels) and VSPACE=# (pixels) can be used together or separately. They specify a buffer width between the table and the other objects beside, above, or below. It keeps graphics or text from crowding the table.

This example uses the ALIGN=LEFT option to left align the whole table to the left side of the page. Check out the difference, referencing the ALIGN=LEFT examples, when you add horizonal and vertical spacing, HSPACE and VSPACE. Now you can read the text or the table without the other one cluttering up the view.

BGCOLOR

You can change the background color in the whole table, a whole row, or one cell at a time by specifying BGCOLOR=xxxxxx in the appropriate tag. Substitute the xxxxxx with the appropriate color code. See the Color Chart guide for the color you want to use.

<TABLE BORDER BGCOLOR=66cc99 HEIGHT=150 WIDTH=400>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

You can use the BGCOLOR command in either the TABLE, TR, TH, or TD tags to affect that portion of the table. When it comes to table formatting, the more local tag has the highest priority. Notice in the example below, the BGCOLOR for the whole table (table tag) is the green color, but the TR tag for the header row was coded for the yellow color. If I had specified any of the TH tags to be blue, then that cell would be blue.

<TABLE BORDER BGCOLOR=66cc99 HEIGHT=150 WIDTH=400>

<TR BGCOLOR=66cc99>
<TH>Year</TH><TH>Make</TH><TH>Model</TH><TH>Size</TH>
</TR>

<TR>
<TD BGCOLOR=00ccff>69</TD> <TD>Penton</TD> <TD>Berkshire</TD> <TD>125cc</TD>

My Favorite Motorcycles

Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

COLSPAN ROWSPAN

There are times when you want to place something wider than a single column or taller than a single row in a single cell. The problem is, if you do this it skews the whole table to fit that item. You can place that larger item or text data in a cell that spans a specified number of rows or columns using the COLSPAN=# (columns) and/or ROWSPAN=# (rows).

I'm going to remove the caption and place the same text in a row above the header row. The row will span all four columns by using the COLSPAN=4 command. I used the TH tag instead of the TD tag because it automatically centers and bolds the text, which is what I wanted.

Next I have added a picture to my table. To keep it large enough to view but not skew the whole table, I used the ROWSPAN=5 command. I put the picture in the top row of the table so it would start from there. I removed the WIDTH=350 setting and added CELLPADDING=10. That allows my table to be flexible without cramping the cells.

<TABLE BORDER CELLPADDING=10 BGCOLOR=66cc99 HEIGHT=150>

<TR BGCOLOR=ffff66>
<TH COLSPAN=4>My favorite Motorcycles</TH>
<TH ROWSPAN=5><IMG SRC="pictures/penton.gif"></TH>
</TR>

My Favorite Motorcycles
Year	Make	Model	Size
69	Penton	Berkshire	125cc
72	CZ	MX	250cc
77	KTM	MC5	250cc

Here is the complete code for the table above.

<CENTER>

<TABLE CELLPADDING=10 BORDER=5 BGCOLOR=66cc99 HEIGHT=150>

<TR BGCOLOR=ffff66>
<TH COLSPAN=4>My Favorite Motorcycles</TH>
<TH ROWSPAN=5><IMG SRC="pictures/penton.gif"></TH>
</TR>

<TR BGCOLOR=00ccff ALIGN=CENTER>
<TH>Year</TH> <TH>Make</TH> <TH>Model</TH> <TH>Size</TH>
</TR>

<TR ALIGN=CENTER>
<TD>69</TD> <TD>Penton</TD> <TD>Berkshire</TD> <TD>125cc</TD>
</TR>

<TR ALIGN=CENTER>
<TD>72</TD> <TD>CZ</TD> <TD>MX</TD> <TD>250cc</TD>
</TR>

<TR ALIGN=CENTER>
<TD>77</TD> <TD>KTM</TD> <TD>MC5</TD> <TD>250cc</TD>
</TR>

</TABLE>

</CENTER>

by Craig Walker