TATBLE - Table
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 should
avoid this practice as much as possible. Tables can cause
problems for users of narrow windows, large fonts, or
non-visual browsers, and these problems are often
accentuated when tables are used solely for layout
purposes. As well, current visual browsers will not
display anything until the complete table has been
downloaded, which can have very noticeable effects when
an entire document is laid out within a TABLE.
Authors should try to 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.
Maintained by Nick Grant < htmlstudio@talk21.com
>
|