HTML Reference Guide : TD Command

You are here: NetStrider » Tutorials » HTMLRef » Tables » TD «

<TD> Command

Command Syntax:
<TD command parameters>
Data Cell Contents
</TD>
Defines a data cell within a table row. The number of data cells within a defined table row determines the number of columns that the row spans. All table rows must have the same number of data cells.
A table data cell is a world unto its own. Only default display characteristics for the entier document apply within any given cell. Any special formatting desired must be set up individually cell by cell within a table unless a style sheet is being used. At present only Internet Explorer browser supports the use of style sheets.
See also: <TABLE>

Command Parameters:

align="left | right | center or middle"
Where:

left -
aligns the content of the data cell to the left margin

right -
aligns the content of the data cell to the right margin

center -
centers the contents of the data cell horizontally within the cell

Example:

left center right

valign="top | bottom | center or middle"
Where:

top -
aligns the content of the data cell to the bottom margin

bottom -
aligns the content of the data cell to the top margin

center -
centers the contents of the data cell vertically within the cell

Example:

top center bottom

background="URL"
Loads an image at the provided URL as the background image for use in the table data cell.
Example:

Data Cell with
Background Image

nowrap
Prevents text from wrapping to fit the available width within a data cell.
Example:

This cell is set nowrap. Text in this cell can wrap.

Note the radical effect this has on table cell widths.

bgcolor="color name | color value"
Determines the background color to be used in the data cell. The default is transparent, i.e., the background color or background image displayed on the site will show through the table data cell.
Color is expressed either as a named color or as a hexadecimal color value.
Example:

bgcolor=
"red" bgcolor=
"#FFFF00"

bordercolor="color name | color value"
Determines the color to be used to depict the borders of the data cell but only if the border attribute has been set within the <TABLE> command.
Color is expressed either as a named color or as a hexadecimal color value.
Example:

bordercolor=
"darkgreen" bordercolor=
"#CC6600"

This attribute in interpreted only by the Internet Explorer browser.

bordercolordark="color name | color value"
Determines the color to be used to depict the highlighted side of the borders of the data cell but only if the border attribute has been set within the <TABLE> command.
Color is expressed either as a named color or as a hexadecimal color value.
bordercolorlight="color name | color value"
Determines the color to be used to depict the shaded side of the borders of the data cell but only if the border attribute has been set within the <TABLE> command.
Color is expressed either as a named color or as a hexadecimal color value.

Example:

bordercolorlight="lime"
bordercolordark="#003300"

These attributes are interpreted only by the Internet Explorer browser.

colspan|rowspan="integer"
Determines number of columns and/or rows, respectively, that the data cell will span.
If a cell spans two rows then the table row directly beneath it must have one less defined data cell to account for the spanned cell.
Example:

Spanned Cell 1
Row 1 Cell 2
Row 1

Cell 1
Row 2

Row two contains only one defined cell.
Conversely, if a cell spans three columns and all other table rows have four columns defined then the row in which the spanned cell occurs can have only two cells, the spanned cell (which accounts for three of the columns) and one other.
Example:

Spanned Cell 1
Columns 1 & 2 Cell 2
Row 1

Cell 1
Row 2 Cell 2
Row 2 Cell 3
Row 2

Row one contains only two defined cells.

height|width="% | pixels"
Determines the height and/or width, respectively, of the table data cell.
Both height and width can be expressed as a percent of the available display space or as an absolute pixel value.
Using a percent to establish height can cause the browser trouble unless the table data cell is already contained within a space with a proscribed height. If a percent is used and the browser has no frame of reference by which to calculate a cogent percent of the available height the result can be odd because, unless otherwise defined, the amount of vertical space available is infinite.
There is no such trouble with horizontal space. Unless otherwise defined the limits of the display screen become the standard against which the browser will evaluate a request for some percent of the available display space.
Using absolute pixel values to determine height and/or width is far less problematic, except in the case where a request is made for a pixel value which exceeds the amount of display space available. In this case the browser will simply push the limit of the display space off screen and put up a horizontal or vertical scroll bar to allow the user to see the entire space, some of which lies out of the range of the viewable display area.
NOTE: Height and width parameters set for a single data cell affect the display of all other cells in the column and row in which the data cell belongs. The browser adjusts all cells within a row and within a column to have the same width and height, if at all possible.

Examples:

Examples are included above along with the command parameters.
The example code below shows a fully defined table data statement within a single-celled table:

Yields -

Single Data Cell

The background and bgcolor attributes are mutually exclusive. Any background image masks the background color set within a data cell. The only reason to set a background color within a data cell which displays a background image is to provide a match for the dominant color of the background image while it loads, as was done here. Reload this frame now to see the effect.

Return to the HTML Reference Guide Section S:Z

HTML Reference Guide Table of Contents.