Main Index |
Top Of Tree |
Tag Index |
Tag History
- What is it?
- The TH and TD elements are part of the original
Simple Table Model and are also part
of the newer, backward compatible Complex
Table Model. These two tags are the table cell identifiers for HTML
tables. All displayable content in a table will be contained within a
Table Header or Data cell. Header cells are identical to data cells in
all respects except rendering: the TH typical default horizontal alignment
is CENTER and text within is made
BOLD - TD typical default horizontal alignment
is LEFT and text within is unmodified.
- Attributes
- Align
- 2
| 3 | 3.2
| IE2 | M2A8
| N1.1
- Required? No
- Description:
This controls the horizontal alignment of text within the current table cell.
- Values: Left |
Center | Right
- Background
- 2
| 3 | 3.2
| IE3A1 | M
| N
- Required? No
- Description:
This attribute specifies a background image to be placed in the current
table cell. All cell contents will be displayed over this image. If the
referenced image is smaller than the table cell size, it will be tiled to
fit all of the cell area. The value for this attribute indicates the URL
to reference the graphic.
- Values: An absolute or relative URL
- BGColor
- 2
| 3 | 3.2
| IE2 | M3
| N3B1
- Required? No
- Description:
This attribute sets the background color to be used for the
current table cell.
- Values: An RGB
triplet or a special Color name
- BorderColor
- 2
| 3 | 3.2
| IE2 | M
| N
- Required? No
- Description:
This attribute sets the internal border color to be used for the
current table cell. Display of this attribute is dependent on the
presence of the BORDER attribute in the TABLE tag.
- Values: An
RGB triplet or a special
Color name.
- BorderColorDark
- 2
| 3 | 3.2
| IE2 | M
| N
- Required? No
- Description:
This attribute allows independent, 3-D color control over the upper and
left hand borders of the internal cell border color for the current table
cell. To change the lower and right hand borders of the internal cell
border color for each cell in the current row, use the BorderColorLight
attribute (see below.) Display of this attribute is dependent on the
presence of the BORDER attribute in the TABLE tag.
- Values: An
RGB triplet or a special
Color name.
- BorderColorLight
- 2
| 3 | 3.2
| IE2 | M
| N
- Required? No
- Description:
This attribute allows independent, 3-D color control over the lower and
right hand borders of the internal cell border color for each cell in
the current table cell. To change the upper and left hand borders of the
internal cell border color for each cell in the current row, use the
BorderColorDark attribute (see above.) Display of this attribute
is dependent on the presence of the BORDER attribute in the
TABLE tag.
- Values: An
RGB triplet or a special
Color name.
- Colspan
- 2
| 3 | 3.2
| IE2 | M2A8
| N1.1
- Required? No
- Description:
Specifies how many cell columns of the table this cell should span.
If this attribute is used, no cell information is specified where
corresponding cell data would otherwise be in a similar table layout
filled with single cells that do not span.
- Values:
Specified in integers with the default being 1.
- Height
- 2
| 3 | 3.2
| IE2 | M
| N1.1
- Required? No
- Description:
Specifies the height of the current cell. A row in HTML tables can only
have a single height, so generally this sets the height for an entire
row. This attribute is not listed in the Tables specification, and in
cases where more than one explicit height is specified for cells in a
single column, the outcome is browser dependent.
- Values:
Specified in pixels or a percentage of the browser window height.
- NOWRAP
- 2
| 3 | 3.2
| IE2 | M2A8
| N1.1
- Required? No
- Description:
This is a standalone attribute which specifies that the data within the
current cell will not use normal HTML linebreaking conventions. The
table cell will enlarge to fit whatever data is specified in the cell
(unless explicit linebreaking tags are added.)
- Values: NA
- Rowspan
- 2
| 3 | 3.2
| IE2 | M2A8
| N1.1
- Required? No
- Description:
Specifies how many cell rows of the table this cell should span. If
this attribute is used, no cell information is specified where
corresponding cell data would otherwise be in a similar table layout
filled with single cells that do not span.
- Values: Specified in integers with
the default being 1.
- VAlign
- 2
| 3 | 3.2
| IE2 | M2A8
| N1.1
- Required? No
- Description:
The VAlign attribute specifies the vertical alignment of the contents
of the cell relative to the cell boundaries.
- Values: Top |
Middle | Bottom |
Baseline
- Width
- 2
| 3 | 3.2
| IE2 | M3
| N1.1
- Required? No
- Description:
Specifies the width of the current cell. A column in an HTML table can
only have a single width and that width used is usually the widest value
of all the cells in a column. So, if a width explicitly specified for
a cell is smaller than the eventual calculated width of another cell in
the column, the larger value will be used instead. This attribute is not
listed in the Tables specification, and in cases where more than one
explicit width is specified for different cells in a single column, the
outcome can be browser dependent.
- Values:
Specified in pixels or a percentage of the browser window width.
Style Sheet Attributes
[More on Cascading Style Sheets]
- Class
- 2 | 3
| 3.2 | IE3B1
| M | N4B2
- Required? No
- Description:
This represents an assigned semantic classification grouping(s) for the
current tag.
- Values:
Given as a comma separated list of alphanumeric characters. Class names
may contain spaces (multiple consecutive spaces treated as a single
space.)
- ID
- 2 | 3
| 3.2 | IE3B1
| M | N4B2
- Required? No
- Description:
This assigns an alpha-numeric identifier that is unique
to this tag instance. Style sheets may use this attribute to reference
the current instance of this tag. Hyperlinks may also use this identifier
to serve as a destination.
- Values:
An alphanumeric string - initial character must be a letter followed
by alphabetic characters, digits, "-" or "."
characters. The allowable set of alpha-characters is restricted to the
A-Z and a-z set.
- Style
- 2 | 3
| 3.2 | IE3B1
| M | N4B3
- Required? No
- Description:
This attribute is a text string that provides rendering style
information for the current tag.
- Values:
Please see the description of
inline styles for more
information on how to use this attribute and its
possible values.
- Example
[Using the Simple Table Model]
- <table BORDER="2"
ALIGN="left" CELLPADDING="5"
BORDERCOLOR="#ff0000"
WIDTH="75%">
<caption ALIGN="top">Juggling Capabilities of Waterfront Performers</caption>
<tr> <th>Juggler</th><th>Pins</th><th>Bowling
Balls</th><th>Flaming Baseballs</th>
</tr>
<tr>
<td>Bob</td> <td>5</td> <td>2</td> <td>5</td>
</tr>
<tr>
<td>Larry</td> <td>2</td> <td>7!!!</td> <td>NA</td>
</tr>
<tr>
<td>Julie the Great</td> <td>1</td> <td>2</td> <td>20<br>(She IS great!)</td>
</tr>
<tr> <th COLSPAN=4>NOTE: This is only a small sample</th> </tr>
</table>
- Parent Model
- <tr>
- Content Model
- %Text% |
%Anchors% |
%Virtual Formatting% |
%Physical Formatting% |
%Line Break Content% |
%Multimedia Content% |
%Block Content% |
<address> |
<basefont> |
<Hx>
Exceptions: <multicol>
Tips & Tricks
- The HTML Tables specification says that end tags for the TH and
TD elements are not necessary. You SHOULD always use it
anyway in order to give your markup better readability and to
reduce confusion in case you need to edit your HTML pages by hand.
- Make sure that the only content of your top-level tags are TR
tags. Also make sure that the only content of your
TRs are TH or TD tags. Otherwise, some browsers
may display table contents incorrectly.
- The Table model (even the Simple Table Model) is easily the most
complex markup structure in HTML. If you have general questions
about this structure see the Table Overview.
- Compatibility Tip: Centering a Table
structure using any of the commonly available centering methods in
HTML can cause the entire contents of the table cells to be centered
in browsers that only support centering and not tables. This can cause
visual display problems in such cases.
- Compatibility Tip:
To enable Table cell contents to display well on browsers that do not
support tables, it is common practice to put either an extra space at
the end of each table cell, or even better, put a
<br> tag at the end of each table
cell. This should cause no display problems for browsers that support
tables (as there is an implied line break anyway at the end of every
table cell) and should greatly improve readability on older browsers.
(notice that I have not used this tip in these pages yet. I hope to
at some point in the future.)
- If you are writing your HTML by hand, it is always highly
recommended to use an HTML validator, but when authoring tables, this holds
doubly true, as it is easy to make mistakes in this area.
- Use of the WIDTH and HEIGHT attributes for TH and TD seem to work
fairly well in Netscape. Internet Explorer behavior is much less
consistent, and Mosaic only supports WIDTH starting in version 3.0 (the
last version.) Keep this in mind when authoring.
- If you are having problems with table layout and borders are turned
off, it can be helpful to temporarily turn them on - this can reveal
clues of why the layout is misbehaving.
Browser Peculiarities
- Internet Explorer seems to be generally more tolerant of invalid
HTML in the creation of table structures than Netscape or Mosaic is,
but do NOT rely on this robustness; check the display on
other browsers as well.
Boring Copyright Stuff...