Main Index |
Top Of Tree |
Tag Index |
Tag History
- What is it?
- This is the top level container tag for HTML table structures. All
formatting information lies between the beginning and ending Table tags.
By default, tables have no borders. All attributes to the Table tag apply
globally to each cell in the table unless overridden at a sub-element level
(row, cell, etc.) by other attributes.
SOME attributes to the TABLE tag are only applicable when the
table is constructed using the Complex
Table Model which allows a finer level of control than the
Simple Table Model while maintaining
backward compatibility with the simpler model.
- Attributes
- Align
- 2
| 3 | 3.2
| IE2 | M3
| N2
- Required? No
- Description:
At the Table level this attribute indicates horizontal alignment of
the table itself relative to the browser window.
- Values: Left |
Center | Right
- Background
- 2
| 3 | 3.2
| IE3A1 | M
| N
- Required? No
- Description:
This attribute specifies a background image to be used as the backdrop
for the table. All cell contents will be displayed over this image.
If the referenced image is smaller than the table size, it will be tiled
to fit all of the table area.
- Values: Either an absolute or relative URL
- BGColor
- 2
| 3 | 3.2
| IE2 | M
| N3B1
- Required? No
- Description:
Specifies the background color of all the table cells. This value can
also be overridden at the cell level.
- Values: An
RGB triplet or a special
Color name
- Border
- 2
| 3 | 3.2
| IE2 | M2A8
| N1.1
- Required? No
- Description:
This is an attribute that specifies the size of the border around the
table. If the value is 0 or absent, no border is rendered. An additional
value of Border can be specified [this is
a legacy value that is supported only for backward compatibility with
early Table specifications.]
- Values: Integers indicating
pixel width of the border.
- BorderColor
- 2
| 3 | 3.2
| IE2 | M
| N
- Required? No
- Description:
This attribute sets the external border color to be used for the entire
table. 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 lower and
right hand borders of the external border color for the current table.
To change the upper and left hand borders of the external cell border
color for the current table, 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 upper and
left hand borders of the external border color for the current table. To
change the lower and right hand borders of the external cell border color
for the current table, 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
- CellPadding
- 2
| 3 | 3.2
| IE2 | M3
| N1.1
- Required? No
- Description:
This specifies globally for all cells the spacing between data in a cell
and the border of a cell.
- Values:
Integers indicating pixel width of the padding.
- CellSpacing
- 2
| 3 | 3.2
| IE2 | M3
| N1.1
- Required? No
- Description:
This specifies globally for all cells the spacing between
individual cells.
- Values:
Integers indicating pixel width of the spacing.
- Cols
- 2
| 3 | 3.2
| IE3A1 | M
| N4B2
- Required? No
- Description:
This Complex Table Model attribute explicitly specifies the number of
columns in the table. Using this attribute can allow the browser to
dynamically render the table as it is downloaded. If this attribute is
absent, it is necessary to receive all of the Table code structure to
determine the number of columns and their appropriate widths before
display.
- Values:
Values are given in positive integers that are equivalent to the number
of columns listed in the Table HTML content.
- Frame
- 2
| 3 | 3.2
| IE3A1 | M
| N
- Required? No
- Description:
This Complex Table Model attribute allows independent control over the
outer border display of the table. Using this attribute coupled with
the RULES attribute yields much greater border display control than the
older Simple Table Model. This attribute takes a single value
representing the sides of the outer table border for which to draw borders
- Values:
Void [Do not render any borders]
Above [Border on top side only]
Below [Border on bottom side only]
HSides [Render horizontal borders only (top and bottom sides.)]
VSides [Render vertical borders only (left and right sides.)]
LHS [Border on left side only]
RHS [Border on right side only]
Box [Border on all four sides]
Frame [Border on all four sides - just like BOX]
- Height
- 2
| 3 | 3.2
| IE2 | M
| N1.1
- Required? No
- Description:
Specifies the height of the entire table.
- Values:
Specified in pixels or a percentage of the browser window height.
- Rules
- 2
| 3 | 3.2
| IE3A1 | M
| N
- Required? No
- Description:
This Complex Table Model attribute is similar to the FRAME attribute,
but where FRAME controls the outer borders around a table, RULES controls
the interior dividing line display in a table. Using this attribute
coupled with the FRAME attribute yields much greater border display
control than the older Simple Table Model.
- Values:
None [No interior borders are displayed]
Groups [Horizontal
borders are displayed between all table groups
specified using the THEAD, TBODY,
TFOOT and COLGROUP tags.]
Rows [Horizontal borders are
displayed between all table rows (TR)]
Cols [Vertical borders are displayed
between all table columns]
All [Borders displayed between all table cells]
- Width
- 2
| 3 | 3.2
| IE2 | M3
| N1.1
- Required? No
- Description:
Specifies the width of the entire table.
- 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 Complex
Table Model]
- <table BORDER="2"
ALIGN="left" CELLPADDING="5" BORDERCOLOR="#ff0000"
COLS="4" FRAME="vsides" RULES="rows" WIDTH="75%">
<caption ALIGN="top">Juggling Capabilities of Waterfront Performers</caption>
<thead>
<tr> <th>Juggler</th><th>Pins</th><th>Bowling
Balls</th><th>Flaming Baseballs</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
<tfoot>
<tr> <th COLSPAN=4>NOTE: This is only a small sample</th> </tr>
</tfoot>
</table>
- [Same table 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
- %Block Format
Parent% |
%Multimedia
Parent% |
<body>
- Content Model
- <caption> |
<colgroup> |
<tr> |
<thead> |
<tbody> |
<tfoot>
Tips & Tricks
- 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.
- Make sure that the only content of the top-level table 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 other 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 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 requires the THEAD, TBODY and TFOOT sections to
exist in order to use the RULES and FRAME attributes of the TABLE
tag. This is counter to the statement in the specifications for
tables that the omission of THEAD, TBODY and TFOOT elements IMPLIES
that the table content is all one TBODY section.
- Currently, when using only the simple table model the only way to
create complex borders for tables is to use nested tables. Nested
tables are entirely legal under the HTML Tables specifications, but
Mosaic versions below 3.0 do not support nested tables (all nested table content
appears as a solid square and content is lost.)
- 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.
- The Tables specification says the CAPTION element should always
come at the beginning of a table structure (this is to ensure proper
rendering in progressive table display.) I have yet to see a
browser misbehave if the CAPTION is placed in a position other than the
beginning of a table (as long as it is within a legal table row
hierarchy relationship.)
- The ALIGN attribute for the table tag does not appear to work
very robustly in either Netscape or Internet Explorer.
Boring Copyright Stuff...