Lesson 5

LESSON 5: Tables

Tables and HTML.
Element TABLE.
Element CAPTION.
Element TR (Table Row).
Elements TH (Table Header) and TD (Table Data).
Examples.

1. Tables and HTML.

Tables are commonly used as a layout device for arranging text and images.

2. Element TABLE.

\..........Description

The TABLE element defines a table for multi-dimensional data arranged in rows and columns.
The TABLE element contains CAPTION, TR, TH and TD.

\..........Syntax

\..........Attributes

Attribute

Description

ALIGN= "left"
"center"
"right"

Specifies the horizontal alignment of the table.
The default is left.

BGCOLOR="color"

Specifies the background color of table cells. The background color of specific cells may differ if specified by attribute BGCOLOR of elements TR, TH and TD.

BORDER="pixels"

Specifies the width of border around the table. If omitted the table has no border.

CELLPADDING="pixels"

Specifies the spacing within cells i.e. between the cell border and cell contents. Default cellpadding is 1.

CELLSPACING="pixels"

Specifies the spacing between cells of the table. Default cellspacing is 2.

HEIGHT="height"

Specifies the table height as:

pixels - (e.g. HEIGHT="60");
-OR- percentage of window height - (e.g. HEIGHT="20%").

WIDTH="width"

Specifies the table width as:

pixels - (e.g. WIDTH="60");
-OR- percentage of window width - (e.g. WIDTH="20%").

\..........Examples to see

Example 1 demonstrates TABLE attributes.

3. Element CAPTION.

\..........Description

The CAPTION element defines a table caption.
CAPTION must be contained within TABLE.

\..........Syntax

\..........Attributes

Attribute

Description

ALIGN= "top"
"bottom"

Specifies the alignment of the caption relative to the table. The default is top.

\..........Examples to see

Example 1 demonstrates use of the CAPTION element.

4. Element TR (Table Row).

\..........Description

The TR element defines a table row.
TR must be contained within TABLE.
TR contains TH and TD.

\..........Syntax

\..........Attributes

Attribute

Description

ALIGN= "left"
"center"
"right"

Specifies the horizontal alignment for each cell in the row. The default is left.

VALIGN= "top"
"middle"
"bottom"

Specifies the vertical position of the cell's contents.

top - positions data at the top of the cell;

middle - centers the cell data vertically (the default value);

bottom - positions data at the bottom of the cell.

BGCOLOR="color"

Specifies the background color for the row of the table. The background color of specific cells may differ if specified by attribute BGCOLOR of elements TH and TD.

\..........Examples to see

Example 2 demonstrates TR attributes.

5. Elements TH (Table Header) and TD (Table Data).

\..........Description

The TH element defines a header cell in a table.
The TD element defines a data cell in a table.
TH and TD are contained within TR.
Browsers display text contained in TH element bold and centered. This is the only difference between TH and TD.

\..........Syntax

\..........Attributes

Attributes of TH and TD are:

Attribute

Description

ALIGN= "left"
"center"
"right"

Specifies the horizontal alignment for the cell's content.

The default is left.

VALIGN= "top"
"middle"
"bottom"

Specifies the vertical position of the cell's content.

top - positions data at the top of the cell;

middle - centers the cell data vertically (the default value);

bottom - positions data at the bottom of the cell.

BGCOLOR="color"

Specifies the background color for the cell.

COLSPAN="number"

Specifies the number of columns that are spanned by the cell.

ROWSPAN="number"

Specifies the number of rows that are spanned by the cell.

\..........Examples to see

Example 3 demonstrates TH and TD attributes.

6. Examples

Choose an example and move below the text box to see the HTML code.

Example 1: TABLE attributes.
Example 2: TR attributes.
Example 3: TH and TD attributes.