TABLE

(table)

The TABLE tag defines a table. Inside the TABLE tag, use the TR tag to define rows in the table, use the TH tag to define row or column headings, and use the TD tag to define table cells.

The TABLE tag can also contain a CAPTION tag, which specifies the caption for the table.

You can specify the width of the border surrounding the table and the default background color of the table. (Individual rows and cells in the table can have their own background color.) You can use the CELLSPACING attribute to specify the distance between cells in the table and the CELLPADDING attribute to specify the distance between the border and content of every cell. If you specify the width and height of the table, the browser will do its best to make the table fit the specified dimensions, but in some cases this may not be possible. For example, if the table contains cells that contain non-wrapping long lines, the table may not fit in a specified width.

Syntax

ALIGN

specifies the horizontal placement of the table.

• LEFT aligns the table on the left (the default). The content following the table flows to the right of the table.
• RIGHT aligns the table on the right. The content following the table flows to the left of the table.
• CENTER aligns the table in the center. Content does not flow on either side.

BGCOLOR="color"

sets the color of the background for the table. This color can be overridden by a BGCOLOR tag in the TH, TR, or TD tags.

BORDER="value"

indicates the thickness, in pixels, of the border to draw around the table. Give the value as an integer. A value of 0 means the table has no border. You can also supply the BORDER attribute without specifying a value for it to indicate that the table has a border of the default thickness.

CELLPADDING="value"

determines the amount of space, in pixels, between the border of a cell and the contents of the cell. The default is 1.

CELLSPACING="value"

determines the amount of space, in pixels, between individual cells in a table. The default is 2.

HEIGHT="height"

specifies the height of the table. The default is the optimal height determined by the contents of each cell. The height value can be a number of pixels, given as an integer, or a percentage of the height of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width.

WIDTH="width"

defines the width of the table. The default is the optimal width determined by the contents of each cell. The width value can be a number of pixels, given as an integer, or a percentage of the width of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width.

COLS="numOfCols"

indicates how many virtual columns of equal width fit in the width of the window. Each actual column in the table occupies a virtual column. You would typically set the COLS attribute to be equal to the number of columns in the table to indicate that all the columns in the table have the same width.

If the WIDTH attribute is supplied, the COLS attribute indicates how many virtual columns fit in the specified width. If the WIDTH attribute is not supplied, the COLS attribute indicates how many virtual columns fit in the current window or frame. Each column in the table occupies one of the virtual columns.

Suppose that the WIDTH attribute is "80%" and the COLS attribute is 4. In this case, each virtual column takes up 20% of the width of the window. Each actual column in the table occupies a virtual column, so it occupies 20% of the width of the window, so long as the table has from 1 to 4 columns inclusive.

Note, however, that if the minimum width needed to display the contents of an actual column is graeter than the width of a virtual column, then the width of the column is expanded to fit its contents.

If the table has more actual columns than the COLS value, then the columns in excess of the COLS value are displayed in the minimum width required to fit their contents, and the other columns divide the remaining space equally between them.

For example, suppose the table has 4 columns, the WIDTH attribute is "80%", and the COLS value is 3. What happens here is that the table takes up 80% of the width of the window. The fourth column uses the minimum width necessary to display the contents of the column. The other 3 columns divide the remaining width of the table equally between them.

HSPACE="horizMargin"

specifies the distance between the left and right edges of the table and any surrounding content.

VSPACE="vertMargin"

specifies the distance between the top and bottom edges of the table and any surrounding content.

CAPTION

(table caption)

The CAPTION tag defines a caption for a table. Place the CAPTION tag within the TABLE tag but not inside the TD or the TR tags, which indicate table cells and table rows respectively.

Syntax

ALIGN

specifies the placement of the caption within a table.

• BOTTOM places the caption at the bottom of the table.
• TOP places the caption at the top of the table. TOP is the default.

TR

(table row)

The TR tag specifies a table row. Use the TR tag inside a TABLE tag. The TR tag can contain TH tags, which indicate table headings, and TD tags, which indicate table cells.

Syntax

ALIGN

specifies the horizontal placement of the table:

• CENTER centers the table .
• LEFT aligns the table to the left (the default).
• RIGHT aligns the table to the right.

VALIGN

specifies the vertical placement of the content in the cell:

• BASELINE aligns the content with the cell's baseline.
• BOTTOM aligns the content with the cell's bottom.
• MIDDLE centers the content within the cell (the default).
• TOP aligns the content with the cell's top.

BGCOLOR="color"

sets the default color of the background of the table row.

Table cells defined with the TD tag inside the row can set their own background color.

TD

(table data)

The TD tag specifies text in a cell in a table. Use the TD tag inside a TR tag inside a TABLE tag.

You can set the background color of a cell by specifying its BGCOLOR attribute. For each cell, you can use the COLSPAN and ROWSPAN attributes to specify how many columns and rows the cell spans.

To specify the distance between cells, set the CELLSPACING attribute in the TABLE tag. To specify the distance between the borders of each cell and its contents, set the CELLPADDING attribute in the TABLE tag. All cells in a table have the same padding and spacing.

If a cell is empty, that is, the <TD> tag is immediately followed by the </TD> tag, the space occupied by the cell in the table is completely empty. That is, the cell has no content, no background color, and no border.

However, suppose you have a four column table, but you have no data for the second column in one of the rows. You should still provide the second TD tag for that row, because if you leave it out the table will close the gap and move the third cell into the second column. The row will end up having three columns only, and it will not be aligned with the rest of the table.

If you want an empty cell to look like other cells in the table, you can give it a period or a dash to indicate that the data is unknown, for example, <TD>-</TD>.

Syntax

ALIGN

specifies the horizontal placement of the contents of the table cell:

• CENTER centers the content within the cell.
• LEFT aligns the content with the cell's left edge (the default).
• RIGHT aligns the content with the cell's right edge.

VALIGN

specifies the vertical placement of the contents of the cell:

• BASELINE aligns the content with the cell's baseline.
• BOTTOM aligns the content with the cell's bottom.
• MIDDLE centers the content within the cell (the default).
• TOP aligns the content with the cell's top.

BGCOLOR="color"

sets the color of the background of the table cell.

COLSPAN="value"

indicates the number of columns the cell spans. Give the number as an integer.

ROWSPAN="value"

indicates the number of rows the cell spans. Give the value as an integer.

HEIGHT="pixelHeight"

specifies the suggested height of the table cell, in pixels.

WIDTH="pixelWidth"

specifies the suggested width of the table cell, in pixels.

NOWRAP

specifies that the lines within a cell cannot be broken (that is, they do not wrap onto the next line).

TH

(table heading)

The TH tag specifies a table cell whose contents are usually displayed in a bolder font than those of regular table cells. The intent of the TH tag is that you use it for column or row headings.

Syntax

ALIGN

specifies the horizontal placement of the heading in the table cell:

• CENTER centers the content within the cell.
• LEFT aligns the content with the cell's left edge (the default).
• RIGHT aligns the content with the cell's right edge.

VALIGN

specifies the vertical placement of the contents of the cell:

• BASELINE aligns the content with the cell's baseline.
• BOTTOM aligns the content with the cell's bottom.
• MIDDLE centers the content within the cell (the default).
• TOP aligns the content with the cell's top.

BGCOLOR="color"

sets the color of the background of the table heading.

This color can be overridden by a BGCOLOR tag in the TD tags within the TH tag.

COLSPAN="value"

indicates the number of columns the cell spans.

ROWSPAN="value"

indicates the number of rows the cell spans.

HEIGHT="pixelHeight"

specifies the suggested height of the table cell, in pixels.

WIDTH="pixelWidth"

specifies the suggested width of the table cell, in pixels.

NOWRAP

specifies that the lines within a cell cannot be broken; that is, they do not wrap onto the next line.