PARTS OF A <TABLE>

<TABLE>...</TABLE>

These tags provide the container for all other table tags. Browsers ignore the other table tags if they aren't contained inside these tags.

The <TABLE> tags accepts the attributes of ALIGN, BORDER, CELLPADDING, CELLSPACING, and WIDTH.

<TR>...</TR>

The table row tags contain the information for all the cells within each row of the table. Each set of table row tags represents a single row in the table, regardless of the number of cells in a row. The table row tag can contain both the ALIGN and VALIGN attributes, which is specified, become the default alignments for all cells in the row.

The <TR> tag accepts the attributes of ALIGN and VALIGN.

<TD>...</TD>

Each cell in the table is defined by the table data tags, which must be nested within table row tags. The following are good tidbits to know about table data tags and how they work.:

• You don't have to worry about making each row contain the same number of cells because short rows are padded with blank cells on the right.
• A cell can contain any HTML tag normally used within the body of an HTML document.

The <TD> tag accepts the attributes of ALIGN, COLSPAN, HEIGHT, NOWRAP, ROWSPAN, VALIGN, and WIDTH.

<TH>...</TH>

Table header tags display text in BOLD with the default of ALIGN="center". Otherwise, they are identical to table data tags,<TD>.

<CAPTION>...</CAPTION>

Place the <CAPTION> tags inside the <TABLE> tags but not inside the table row tags or cells. Like table cells, any document body HTML can appear in a caption. Captions are horizontally centered with respect to the table, and their lines are wrapped to fit within the width of the table.

The <CAPTION> tag accepts the attributes of ALIGN.

Basic Table Attributes

You can use several attributes with the table tags. Innovative use of these attributes is the key to making your tables truly outstanding or, at least, interesting.

ALIGN="(top/bottom/left/center/right)"

When you use the ALIGN attribute with the <CAPTION> tag, specify ALIGN="top" or ALIGN="bottom" to control whether the caption appears above or below the table. The default alignment of the caption is "top".

When you use ALIGN inside of a <TABLE>, <TR>, <TH>, or <TD> tag, ALIGN accepts values of left, center, or right to control the horizontal placement of text within the cells. The default value of ALIGN for these tags is left.

BORDER="number"

You use the BORDER attribute in the <TABLE> tag to instruct the browser to display borders around the table and all the table cells. Space is left for borders around tables so the tables width does not change when a border is added. If no number is specified, BORDER defaults to a width of one (1).

CELLPADDING="number"

When used within the <TABLE> tag, the CELLPADDING value indicates the amount of space between the border of a cell and the contents of the cell. The default value is one pixel. Setting the cell padding to zero on a table with borders causes the text to touch the border. Padding cells can help you greatly enhance the visual impact of your tables, especially when you couple the padding with cell spacing and border sizing.

CELLSPACING="number"

You use the CELLSPACING attribute within the <TABLE> tag to represent the amount of space inserted between individual cells in a table. The default value is two pixels between cells. Couple this with the CELLPADDING attribute and you can really make interesting looking tables.

WIDTH=("number/percent%")

You can use the WIDTH attribute inside the <TABLE> tag to set the width of the table as an absolute width in pixels or as a percentage of the browser display area.

When you use the WIDTH attribute in the <TH> or <TD> tag, you set the width of the cell as an absolute width in pixels or as a percentage of the table width.

VALIGN="(top/middle/bottom/baseline)"

The VALIGN (vertical alignment) attribute is used inside a <TR>, <TH>, or<TD> tag to control the placement of the cell's contents at the top, middle, or bottom of the cell or to align all elements with a common baseline.

NOWRAP

When you use the NOWRAP in a table cell (<TD> or <TH>), the NOWRAP attribute forces the browser to display all of the text for that  particular cell on a single line. Using this attribute can cause very wide cells, so be careful.

COLSPAN="number"

Use COLSPAN in any table cell to specify how many columns of the table the cell should span if you want to span more than the default of one cell.

ROWSPAN="number"

Use ROWSPAN in any table cell to specify how many rows of the table the cell should span if you want to span more than the default of one cell.