This is the top level containing element for HTML table structures. All
formatting information lies between the beginning and ending Table tags.
By default, tables have no borders. All attributes of the Table element 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 element 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.
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
| 4 | IE3A1
| M | N4B3
| O
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
| 4 | IE2
| M | N3B1
| O2.1
Required? No
Description:
Specifies the background color of all the table cells. This value can
also be overridden at the cell level.
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
| 4 | IE2
| M | N
| O
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 element.
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 element.
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 element.
Description:
This specifies globally for all cells in the table the spacing between data
in a table cell and the border of the cell.
Values:
Integers indicating pixel width of the padding.
CellSpacing
2
| 3 | 3.2
| 4 | IE2
| M3 | N1.1
| O2.1
Required? No
Description:
This specifies globally for all cells in the table the spacing between
individual cells.
Values:
Integers indicating pixel width of the spacing.
Cols
2
| 3 | 3.2
| 4 | IE3A1
| M | N4B2
| O
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:
Positive integers representing the number of columns listed in the
Table HTML content.
Datapagesize
2
| 3 | 3.2
| 4 | IE4
| M | N
| O
Required? No
Description:
Sets the number of records displayed in a data bound repeated table.
Values:
Positive integers.
Frame
2
| 3 | 3.2
| 4 | IE3A1
| M | N
| O
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] Border [Border on all four sides - just like BOX -
DEFAULT]
Height
2
| 3 | 3.2
| 4 | IE2
| M | N1.1
| O2.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
| 4 | IE3A1
| M | N
| O
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]
Summary
2
| 3 | 3.2
| 4 | IE
| M | N
| O
Required? No
Description:
This attribute aids accessibility for non-visual browsers by providing a
summary of the table's purpose and structure.
Values:
Alphanumeric characters.
Width
2
| 3 | 3.2
| 4 | IE2
| M3 | N1.1
| O2.1
Required? No
Description:
Specifies the width of the entire table.
Values:
Specified in pixels or a percentage of the browser window width.
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
legal structures (such as TR elements.) Also make
sure that the only content of your TRs are TH or
TD elements. 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> element at the end of the last cell in
each table row. 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
element. 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 element does not appear to work
very robustly in either Netscape or Internet Explorer.
Netscape now supports the BACKGROUND attribute for placement of
background images for the entire table. I have never found this
documented anywhere and it was a reader that alerted me to the fact.
When testing the behavior, an occasional glitch seemed apparent -
be sure to check display of this attribute in supporting Netscape
versions for proper behavior if you plan to use it.
The use of CENTER as a value for the ALIGN attribute in Internet
Explorer and Netscape does not work like the LEFT and RIGHT
floating behaviors. CENTER causes no floating behavior - it just
centers the table on the screen (like wrapping the table in the
DIV ALIGN=CENTER or CENTER elements.)
The COLS attribute in Netscape makes all the columns of the table will
have equal width, regardless of the size of the cell content.