| Syntax | <TABLE>...</TABLE> |
|---|---|
| Attribute Specifications |
|
| Contents | An optional CAPTION, followed by zero or more COL and COLGROUP elements, followed by an optional THEAD element, an optional TFOOT element, and then one or more TBODY elements |
| Contained in | APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH |
The TABLE element defines a table for multi-dimensional data arranged in rows and columns. TABLE is commonly used as a layout device, but authors can also use style sheets in place of TABLE for layout, though bugs in current browser implementations of style sheets can make this difficult.
The TABLE may contain a number of optional elements to provide a rich structure to the table. The optional CAPTION element gives a caption for the table and is followed by optional COL and COLGROUP elements that specify column widths and groupings. The THEAD, TFOOT, and TBODY elements then follow with groups of rows. The optional THEAD and TFOOT elements contain header and footer rows, respectively, while TBODY elements supply the table's main row groups. A row group contains TR elements for individual rows, and each TR contains TH or TD elements for header cells or data cells, respectively.
At least one TBODY element is required within a TABLE, but TBODY's start and end tags are both optional if there is only one TBODY and no THEAD or TFOOT. A simple table could thus be expressed as follows:
<TABLE>
<TR>
<TH>Abbreviation</TH>
<TH>Long Form</TH>
</TR>
<TR>
<TD>AFAIK</TD>
<TD>As Far As I Know</TD>
</TR>
<TR>
<TD>IMHO</TD>
<TD>In My Humble Opinion</TD>
</TR>
<TR>
<TD>OTOH</TD>
<TD>On The Other Hand</TD>
</TR>
</TABLE>
The same table could be expressed with a richer structure by grouping rows and adding a caption, as in the next example. The extra structural information allows an author to more easily suggest the presentation of the table using style sheets or TABLE's presentational attributes.
<TABLE>
<CAPTION>Common Usenet Abbreviations</CAPTION>
<THEAD>
<TR>
<TH>Abbreviation</TH>
<TH>Long Form</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>AFAIK</TD>
<TD>As Far As I Know</TD>
</TR>
<TR>
<TD>IMHO</TD>
<TD>In My Humble Opinion</TD>
</TR>
<TR>
<TD>OTOH</TD>
<TD>On The Other Hand</TD>
</TR>
</TBODY>
</TABLE>
The TABLE element takes an optional SUMMARY attribute to describe the purpose and/or structure of the table. The overview provided by the SUMMARY attribute is particularly helpful to users of non-visual browsers. With simple tables, a good CAPTION is usually a sufficient summary, but complex tables may benefit from a more detailed overview via the SUMMARY attribute. The following example uses SUMMARY to describe a table. Note that the summary could also be included in a paragraph before the table, which is helpful since few browsers support SUMMARY.
<TABLE SUMMARY="This table gives the character
entity reference,
decimal character reference, and hexadecimal character
reference for symbols and Greek letters.">
<COLGROUP>
<COLGROUP SPAN=3>
<THEAD>
<TR>
<TH SCOPE=col>Character</TH>
<TH SCOPE=col>Entity</TH>
<TH SCOPE=col>Decimal</TH>
<TH SCOPE=col>Hex</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD SCOPE=row>Latin small f with hook</TD>
<TD>&fnof;</TD>
<TD>&#402;</TD>
<TD>&#x192;</TD>
</TR>
...
</TBODY>
</TABLE>
The TABLE element also takes a number of optional attributes to provide presentational hints in visual browsers. Equivalents of these attributes in Cascading Style Sheets are under development and not widely supported by browsers.
The WIDTH attribute specifies the width of the table as a number of pixels or as a percentage of the available horizontal space. Widths in pixels should be avoided, especially widths above 500 pixels, since this causes unnecessary horizontal scrolling for some users.
The BORDER attribute specifies the width in pixels of the border around a table.
The FRAME attribute, poorly supported by browsers, specifies which sides of the table's outer border are visible. Possible values are void for no border, above for a top border only, below for a bottom border only, hsides for left and right borders only, vsides for top and bottom borders only, lhs for a left border only, rhs for a right border only, and either box or border for a border on all sides. The default value is void unless the BORDER attribute gives a positive width, in which case FRAME=border is the default. <TABLE BORDER> is a valid, well-supported shorthand for <TABLE FRAME=border>.
The RULES attribute, poorly supported by browsers, specifies the borders between table cells. Possible values are none for no inner borders, groups for borders between row groups and column groups only, rows for borders between rows only, cols for borders between columns only, and all for borders between all cells. None is the default value if BORDER=0 is used or if no BORDER attribute is given. All is the default value for any other use of BORDER.
The CELLSPACING attribute defines the amount of space between table cells, and the CELLPADDING attribute defines the amount of space within table cells (i.e., between the border and cell contents). The value may be given as a number of pixels or as a percentage, though most browsers do not support percentages, treating CELLPADDING="20%" as if it were CELLPADDING="20". A percentage value is relative to the vertical space available for vertical padding or spacing, and the amount is split evenly between the top and bottom. Horizontal padding and spacing behave similarly. The padding or spacing is always applied to all four sides.
The padding properties of Cascading Style Sheets allow an author to suggest different padding for different sides, but are not as well supported as the CELLPADDING attribute.
The deprecated ALIGN attribute suggests the horizontal alignment of the table on visual browsers. Possible values are left, right, and center. Browsers generally present left- or right-aligned tables as floating tables, with the content following the TABLE flowing around it. To prevent content from flowing around the table, use <BR CLEAR=all> after the end of the TABLE.
Since many browsers do not support ALIGN=center with TABLE, authors may wish to place the TABLE within a CENTER element.
Style sheets provide more flexibility in suggesting table alignment but with less browser support than the ALIGN attribute.
The deprecated BGCOLOR attribute suggests a background color for the table. The combination of this attribute with <FONT COLOR= ... > can leave invisible or unreadable text on Netscape Navigator 2. x , which does not support BGCOLOR on table elements. BGCOLOR is dangerous even on supporting browsers, since most fail to override it when overriding other author-specified colors. Style sheets provide a safer, more flexible method of specifying a table's background color.