(Last Updated 11/20/98)

HTML Tables

Tables are the most widely used formatting element in HTML. They display both tabular and non-tabular information in a professional looking manner. To my knowledge, anything that can be put anywhere on a page can also be placed in a table element. This includes text, anchors, links, images etc.

This page is provided as a short tutorial in the use of Tables. It includes a listing of the available table tags and their options; a short set of "tips", "tricks", and "watch-outs" in using tables; and a set of examples of their use.

Tables are in actuality are relatively easy objects to visualize:

TABLE

CAPTION

In tabular form, the HTML table tags are:

Table Tags

Tag Description

<TABLE> & </TABLE> Defines the start and end of the TABLE. Its parameters are:
WIDTH: Table width (pixels or percent).

BORDER: define a border around the table & its elements (pixels). {Most browsers default to 0.}

ALIGN: Locate the TABLE left or right; To align the table in the center, use an exterior <CENTER> tag.

BGCOLOR="#RRGGBB": Define the background color in the table.

COLS=n: Set the Table to n equal width columns wide.
CELLPADDING=n: Space between data cells (pixels).

CELLSPACING=n: Space around data within data cells (pixels).

<CAPTION> & </CAPTION> Table Title. It spans the entire table, is borderless (regardless of the BORDER element above), and defaults to above the table. To locate the caption at the bottom use: ALIGN=BOTTOM. (ALIGN=TOP is acceptable but redundant.)
<TR> & </TR> ROW tag. Defines the start and end of each row. The same ALIGN and VALIGN parameters used in the cell tags can be used here.

<TH> & </TH> HEADER cell element tag. Defines the start and end of each header cell. (Same as a data cell tag except, the cell contents default to centered and bold (for text).)

<TD> & </TD> DATA cell element tag. Defines the start and end of each table data cell. The cell contents default to aligned left and vertically centered. Additional parameters for theHeader & data cells are:
ALIGN (LEFT, CENTER, RIGHT): Horizontal alignment of cell contents.

VALIGN (TOP, MIDDLE, BOTTOM): Vertical alignment of cell contents. (Note: On some browsers, ALIGN & VALIGN cannot both be defined simultaneously.)

COLSPAN=n: The number of columns a cell spans.

ROWSPAN=n: The number of rows a cell spans.

NOWRAP: Turns off word wrapping within the cell.

BGCOLOR=#RRGGBB: Sets the background color for the cell (HTML 3.x and above)>

Things to Note

TH, TD and TR usually do not need to be terminated however it is usually safer and neater to include all end tags. This saves possible problems from the table formatter (and parser in cases of tables within tables) and makes the page easier to read when you return to it 3 months later.

Standard tag pairs such as FONT, CENTER, etc. occuring within array cells also do not need to be terminated (the cell boundary will terminate them) however it is usually much clearer and neater to include all end tags.

To minimize confusion when working with multiple tables, it is usually better to initially set all borders to 1, to set each table background color to a slightly different tint, and to indent the source code each time a new table is begun.

It is stated by many authors that anchors cannot be used within a table. I don't do it normally, but have just tried it and it work fine. Its one of the examples below. If you do have a problem; close the table, insert the anchor, then open a new table. (Back to top.)

Defaults:

The border default is no borders.

The table alignment default is aligned left.

The data cell alignment default is horizontally aligned left, vertically aligned center.

The header cell alignment default is horizontally and vertically aligned center.

When an alignment attribute is defined in both a row tag {TR} and a cell tag {TH or TD}, the cell attribute takes precedence.

Be careful when nesting tables, A nested table can cause the cell into which it is nested to be wider than you thought. In particular, don't forget to include cellpadding when calculating sizes.

Also remember, coding errors in interior nested tables reflect back out dramatically to the exterior tables.

Only as a warning, nesting tables have been known to produce unpredictable Java Script results.

When using tables to move page contents over to miss a vertical background border, always state the table width as 100% and the cell width in pixels.

In Netscape, a table has to load completely before the viewer will see any of the table. Therefore, including a lot of images in a single table gives the impression that the page load has stalled.

Examples

(Your window should be at least as wide as this bar.)

Simple Tables

Border=1

Border=0

Border=9

Head 1	Head 2
Data 1	Data 2

Head 1	Head 2
Data 1	Data 2

Head 1	Head 2
Data 1	Data 2

Border=1
CellPadding=9

Border=1
CellSpacing=9

Border=1
Width=90 pixels

Head 1	Head 2
Data 1	Data 2

Head 1	Head 2
Data 1	Data 2

Head 1	Head 2
Data 1	Data 2

Width=80%

Head 1	Head 2
Data 1	Data 2

Border=1
Caption-top

Border=1
Caption-bottom

Border=1
white

Caption
Head 1	Head 2
Data 1	Data 2

Caption
Head 1	Head 2
Data 1	Data 2

Head 1	Head 2
Data 1	Data 2

Border=1
Color=white

Border=1
Data Cell 1 color = white

Head 1	Head 2
Data 1	Data 2

Head 1	Head 2
Data 1	Data 2

Tables Within Tables

<TD COLSPAN=2 ALIGN="center">Right Inner Table</TD>

<TD COLSPAN=2 ALIGN="center">Left Inner Table</TD>

Outer Table Caption

Right Inner Table
True	False

Top of Page

Left Inner Table
False	True

Spanning Multiple Rows and Columns

Row - 1, Col - 1</TD>

Rows - 2 & 3 Cols - 3 & 4</TD>

Rows - 3 & 4 Col - 1</TD>

Row - 5, Cols - 1 through 5</TD>

Row - 1, Col - 1	Row - 1, Col - 2	Row - 1, Col - 3	Row - 1, Col - 4	Row - 1, Col - 5
Row - 2, Col - 1	Row -2, Col - 2	Rows - 2 & 3 Cols - 3 & 4		Row - 2, Col - 5
Rows - 3 & 4 Col - 1	Row - 3, Col - 2	Rows - 2 & 3 Cols - 3 & 4		Row - 3, Col - 5
Rows - 3 & 4 Col - 1	Row - 4, Col - 2	Row - 4, Col - 3	Row - 4, Col - 4
Row - 5, Cols - 1 through 5

<CENTER>The World of Psychology </CENTER></TD></TR>

of Study</TD>

Abnormal Psychology</TD>

School Psychology</TD>

Clinical Psychology</TD>

The World of
Psychology

Fields of Study

Abnormal Psychology
Social Psychology	School Psychology
Industrial Psychology	Clinical Psychology

Table Tags
Tag	Description
<TABLE> & </TABLE>	Defines the start and end of the TABLE. Its parameters are: WIDTH: Table width (pixels or percent). BORDER: define a border around the table & its elements (pixels). {Most browsers default to 0.} ALIGN: Locate the TABLE left or right; To align the table in the center, use an exterior <CENTER> tag. BGCOLOR="#RRGGBB": Define the background color in the table. COLS=n: Set the Table to n equal width columns wide. CELLPADDING=n: Space between data cells (pixels). CELLSPACING=n: Space around data within data cells (pixels).
<CAPTION> & </CAPTION>	Table Title. It spans the entire table, is borderless (regardless of the BORDER element above), and defaults to above the table. To locate the caption at the bottom use: ALIGN=BOTTOM. (ALIGN=TOP is acceptable but redundant.)
<TR> & </TR>	ROW tag. Defines the start and end of each row. The same ALIGN and VALIGN parameters used in the cell tags can be used here.
<TH> & </TH>	HEADER cell element tag. Defines the start and end of each header cell. (Same as a data cell tag except, the cell contents default to centered and bold (for text).)
<TD> & </TD>	DATA cell element tag. Defines the start and end of each table data cell. The cell contents default to aligned left and vertically centered. Additional parameters for theHeader & data cells are: ALIGN (LEFT, CENTER, RIGHT): Horizontal alignment of cell contents. VALIGN (TOP, MIDDLE, BOTTOM): Vertical alignment of cell contents. (Note: On some browsers, ALIGN & VALIGN cannot both be defined simultaneously.) COLSPAN=n: The number of columns a cell spans. ROWSPAN=n: The number of rows a cell spans. NOWRAP: Turns off word wrapping within the cell. BGCOLOR=#RRGGBB: Sets the background color for the cell (HTML 3.x and above)>