The <TABLE> tag

Every table must be surrounded by the <TABLE> and </TABLE> tags. Whenever your browser encounters a table, it pauses to read in everything between these two tags before deciding how to arrange and display it. If you forget either one of them, your table will not show up at all!

The <TABLE> tag has quite a few attributes. You never need to include any of them, but here are a few of the more useful ones:

Attribute

Description

BORDER

Tables, by default, have no visible borders. If you would like your table to have a border, assign this attribute to a value (in pixels). BORDER=1 (or just BORDER) will give your table a very thin border. BORDER=5 is much thicker.

CELLSPACING

This attribute controls how much space (in pixels) there is between cells. Default cellspacing is 1, but you can use this attribute to raise or lower it (e.g. CELLSPACING=0).

CELLPADDING

Cellpadding is the space between a cell's borders and content. In tables with borders, you may want to set CELLPADDING=5 to avoid having text touch the edges of the cells.

WIDTH

WIDTH can be assigned either a number of pixels or a percentage of the width of the window. For example, WIDTH=80% will result in a table that is always 80% as wide as the browser window. WIDTH=80 will result in a table that is always 80 pixels wide.

BGCOLOR

The BGCOLOR attribute controls the default background color of every cell in your table. As with the BGCOLOR attribute in the <BODY> tag, BGCOLOR can only be assigned a built-in color or RGB value (e.g. BGCOLOR="blue"). If no BGCOLOR is specified, the table will have the same background color as the page.

The <TR> tag

Every row you create within your table must be surrounded by <TR> and </TR> tags. Here are some of the attributes you can include:

Attribute

Description

ALIGN

This attribute will control the horizontal alignment in the text of each cell in that row. Its default is LEFT, but you can set it to CENTER or RIGHT.

VALIGN

This attribute will control the vertical alignment in the text of each cell in that row. Its default is MIDDLE, but you can set it to TOP or BOTTOM.

BGCOLOR

The BGCOLOR attribute controls the default background color of every cell in the row. As with the BGCOLOR attribute in the <TABLE> tag, BGCOLOR can only be assigned a built-in color or RGB value (e.g. BGCOLOR="blue"). If no BGCOLOR is specified, the row will have the same background color as the table.

The <TD> tag

All text within your table should be surrounded by <TD> (or <TH>) and </TD> (or </TH>). These tags create the actual data cells, and thus have a lot of optional attributes to help you customize your table:

Attribute

Description

ALIGN

This attribute will control the horizontal alignment in the text in the cell. Its default is LEFT, but you can set it to CENTER or RIGHT.

VALIGN

This attribute will control the vertical alignment in the text in the cell. Its default is MIDDLE, but you can set it to TOP or BOTTOM.

BGCOLOR

The BGCOLOR attribute controls the background color of this cell. As with the BGCOLOR attribute in the <TABLE> tag, BGCOLOR can only be assigned a built-in color or RGB value (e.g. BGCOLOR="blue"). If no BGCOLOR is specified, the cell will have the same background color as the row.

ROWSPAN

ROWSPAN controls how many rows the cell occupies, allowing you to merge the cells of three rows into one tall cell. The default is 1, but you can raise this attribute to be anything up to the number of remaining rows. For example, ROWSPAN=3 will cause the cell to be 3 rows high.

When you have set a cell to occupy more than one row, you will usually be filling fewer cells in the next few rows. If, for example, you set ROWSPAN=4 on one cell in a table that is 5 columns wide, the next 3 rows would have 4 columns to fill instead of 5.

COLSPAN

COLSPAN controls how many columns the cell occupies, allowing you to merge the cells of three columns into one long cell. The default is 1, but you can raise this attribute to be anything (if you raise it above the number of remaining columns, it will create new ones on the right). For example, COLSPAN=3 will cause the cell to be 3 rows long.


Other table tags

There are two other tag pairs which can be used within tables: