Chapter 13. Tables
HTML
tags for creating tables were originally developed for presenting
rows and columns of tabular data, but designers quickly co-opted them
as a valuable tool for controlling the layout of web pages. Tables
allow you to create columns of text, hold white space between
elements, and restrict the dimensions of the page's content in
ways other HTML formatting tags can't.
The HTML 4.01 specification on tables is a great deal more complex
than the previous 3.2 standard. It makes an effort to bring context
and structure to table data as well as to provide systems for
incremental display during download and display on nonvisual display
agents (such as speech- and Braille-based browsers). To read what the
HTML 4.01 specification has to say about tables, see the W3C's
site at http://www.w3c.org/TR/html4/struct/tables.html.
13.1. Summary of Table Tags
In this section, browser support for each tag is noted to the right
of the tag name. Browsers that do not support the tag are grayed out.
Tag usage is indicated below the tag name. Start and end tags are
required unless otherwise noted. "Deprecated" means that
the tag or attribute is currently supported but is due to be phased
out of the HTML specification and is discouraged from use (usually in
favor of similar style sheet controls). The attributes listed for
each tag reflect those in common use. A more thorough listing of
attributes for each tag, according to the HTML 4.01 specification,
appears in Appendix A, "HTML Elements".
<caption> | NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5 |
Provides a brief summary of the table's contents or purpose.
The caption must immediately follow the
<table> tag and precede all other tags. The
width of the caption is determined by the width of the table. The
caption's position as displayed in the browser can be
controlled with the align attribute (or
valign in MSIE).
Attributes
- align=top|bottom|left|right
-
Deprecated. Positions the caption relative to
the table. The default is top.
- valign=top|bottom
-
Internet Explorer 3.0 and higher only. Positions
the caption above or below the table (top is the
default).
<col> | NN 6 MSIE 3, 4,
5, 5.5, 6 HTML 4.01 |
Specifies properties for a column (or group of columns) within a
column group
(<colgroup>). Columns can share attributes
(such as text alignment) without being part of a formal structural
grouping.
Column groups and columns were introduced by Internet Explorer 3.0
and are now proposed by the HTML 4.01 specification as a standard way
to label table structure. They may also be useful in speeding table
display (i.e., the columns can be displayed incrementally without
waiting for the entire contents of the table).
Attributes
- align=left|right|center|justify|char
-
Deprecated. Specifies alignment of text in the
cells of a column. The default value is left.
- char=character
-
Specifies a character along which the cell contents will be aligned
when align is set to char. The
default character is a decimal point (language-appropriate). This
attribute is generally not supported by current browsers.
- charoff=length
-
Specifies the offset distance to the first alignment character
(char) on each line. If a line doesn't use
an alignment character, it should be horizontally shifted to end at
the alignment position. This attribute is generally not supported by
current browsers.
- span=number
-
Specifies the number of columns "spanned" by the
<col> element. The default value is 1. All
columns indicated in the span are formatted according to the
attribute settings in <col>.
- valign=top|middle|bottom|baseline
-
Deprecated. Specifies the vertical alignment of
text in the cells of a column.
- width=pixels, percentage, n*
-
Specifies the width of each column spanned by the
<col> element. Width can be measured in
pixels or percentages, or defined as a relative size
(*). For example, 2* sets the
column two times wider than the other columns; 0*
sets the column width at the minimum necessary to hold the
column's contents. width in the
<col> tag overrides the width settings of
the containing <colgroup> element.
<colgroup> | NN 6 MSIE 3, 4,
5, 5.5, 6 HTML 4.01 |
<colgroup>...</colgroup> (end tag optional) | |
Creates a column group, a structural division
within a table that can be appointed attributes with style sheets or
HTML. A table may include more than one column group. The number of
columns in a group is specified either by the value of the
span attribute or by a tally of columns
<col> within the group. Its end tag is
optional.
Column groups and columns were introduced by Internet Explorer 3.0
and are now proposed by the HTML 4.0 specification as a standard way
to label table structure. They may also be useful in speeding the
table display (i.e., the columns can be displayed incrementally
without waiting for the entire contents of the table).
Attributes
- align=left|right|center|justify|char
-
Deprecated. Specifies the alignment of text in
the cells of a column group. The default value is
left.
- char=character
-
Specifies a character along which the cell contents will be aligned
when align is set to char. The
default character is a decimal point (language-appropriate). This
attribute is generally not supported by current browsers.
- charoff=length
-
Specifies the distance to the first alignment character
(char) on each line. If a line doesn't use
an alignment character, it should be horizontally shifted to end at
the alignment position. This attribute is generally not supported by
current browsers.
- span=number
-
Specifies the number of columns in a column group. If
span is not specified, the default is 1.
- valign=top|middle|bottom|baseline
-
Deprecated. Specifies the vertical alignment of
text in the cells of a column group. The default is
middle.
- width=pixels, percentage, n*
-
Specifies a default width for each column in the current column
group. Width can be measured in pixels, percentages, or defined as a
relative size (*). 0* sets the
column width at the minimum necessary to hold the column's
contents.
<table> | NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5 |
Defines the beginning and end
of a table. The end tag is required, and its omission may cause the
table not to render in some browsers.
Attributes
- align=left|right|center
-
Deprecated. Aligns the table within the text
flow (same as align in the
<img> tag). The default alignment is
left. The center value is not
universally supported, so it is more reliable to center a table on a
page using tags outside the table (such as
<center> or <div>).
- background=url
-
Nonstandard. Specifies a graphic image to be
tiled in the background of the table. In Internet Explorer 3.0 and
higher, the image tiles behind the entire table. In Netscape
Navigator 4.0, the tile repeats in each individual cell (although its
support is not officially documented).
- bgcolor="#rrggbb" or color name
-
Specifies a background color for the entire table. Value is specified
in hexadecimal RGB values or by color name (see Chapter 16, "Specifying Color in HTML" for more information on specifying colors in
HTML).
- border=number
-
Specifies the width (in pixels) of the border around the table and
its cells. Set it to border=0 to turn the borders
off completely. The default value is 1. Adding the word
border without a value results in a 1-pixel
border.
- cellpadding=number
-
Sets the amount of space, in number of pixels, between the cell
border and its contents. The default value is 1. For more
information, see xxx the "Space Between Cells" section in
this chapter.
- cellspacing=number
-
Sets the amount of space (in number of pixels) between table cells.
The default value is 2. For more information, see the "Space
Between Cells" section in this chapter.
- frame=void|above|below|hsides|lhs|rhs|vsides|box|border
-
Tells the browser where to draw borders around the table. The values
are as follows:
void
|
The frame does not appear (default)
|
above
|
Top side only
|
below
|
Bottom side only
|
hsides
|
Top and bottom sides only
|
vsides
|
Right and left sides only
|
lhs
|
Left-hand side only
|
rhs
|
Right-hand side only
|
box
|
All four sides
|
border
|
All four sides
|
When the border attribute is set to a value
greater than zero, the frame defaults to border
unless otherwise specified. This attribute was introduced by Internet
Explorer 3.0 and now appears in the HTML 4.01 specification. Netscape
supports this attribute in Version 6 only.
- height=number, percentage
-
Nonstandard. Specifies the minimum height of the
entire table. It can be specified in a specific number of pixels or
by a percentage of the parent element.
- hspace=number
-
Holds a number of pixels space to the left and right of a table
positioned with the align attribute (same as
hspace in the <img> tag).
- rules=all|cols|groups|none|rows
-
Tells the browser where to draw rules within the table. Its values
are as follows:
none
|
No rules (default)
|
groups
|
Rules appear between row groups (thead,
tfoot, and tbody) and column
groups
|
rows
|
Rules appear between rows only
|
cols
|
Rules appear between columns only
|
all
|
Rules appear between all rows and columns
|
When the border attribute is set to a value
greater than zero, rules default to all unless
otherwise specified.
This attribute was introduced by Internet Explorer 3.0 and now
appears in the HTML 4.01 specification. Netscape supports it in
Version 6 only.
- summary=text
-
Provides a summary of the table contents for use with nonvisual
browsers.
- vspace=number
-
Holds a number of pixels space above and below table positioned with
the align attribute (same as
vspace in the <img> tag).
- width=number, percentage
-
Specifies the width of the entire table. It can be specified in a
specific number of pixels or by percentage of the parent element.
Internet Explorer only
- bordercolor="#rrggbb" or color name
-
Specifies the color of the main center portion of a table border.
(Table borders are rendered using three color values to create a 3-D
effect.)
- bordercolorlight="#rrggbb" or color name
-
Specifies the color of the light shade used to render 3-D-looking
table borders.
- bordercolordark="#rrggbb" or color name
-
Specifies the color of the dark shade used to render 3-D-looking
table borders.
<tbody> | NN 6 MSIE 3, 4,
5, 5.5, 6 HTML 4.01 |
<tbody>...</tbody> (start and end tags optional) | |
Defines a row or group of rows as the "body" of the
table. It must contain at least one row
(<tr>).
"Row group" tags (tbody,
thead , and tfoot) were
introduced by Internet Explorer and are part of the HTML 4.01
specification. The attributes for <tbody>
are currently not supported by any commercial browser. Row groups
could speed table display and provide a mechanism for scrolling the
body of a table independently of its head and foot. It could also be
useful for printing long tables for which the head information could
be printed on each page.
Attributes
- align=left|center|right|justify|char
-
Deprecated. Specifies horizontal alignment (or
justification) of cell contents. The default value is
left.
- char=character
-
Specifies a character along which the cell contents will be aligned.
The default character is a decimal point (language-appropriate). This
attribute is generally not supported by current browsers.
- charoff=length
-
Specifies the offset distance to the first alignment character
(char) on each line. If a line doesn't use
an alignment character, it should be horizontally shifted to end at
the alignment position. This attribute is generally not supported by
current browsers.
- valign=top|middle|bottom|baseline
-
Deprecated. Specifies vertical alignment of cell
contents.
<td> | NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5 |
<td>...</td> (end tag optional) | |
Defines a table data cell. The end tag is not required but may
prevent unpredictable table display, particularly if the cell
contains images. A table cell can contain any content, including
another table.
Attributes
- align=left|center|right|justify|char
-
Deprecated. Specifies horizontal alignment (or
justification) of cell contents. The default value is
left.
- background=url
-
Specifies a graphic image to be used as a tile within the cell.
Netscape's documentation does not cover this tag, but it is
supported by Version 4.0.
- bgcolor="#rrggbb" or color name
-
Specifies a color to be used in the table cell. A cell's
background color overrides colors specified at the row or table
levels.
- colspan=number
-
Specifies the number of columns the current cell should span. The
default value is 1. According to the HTML 4.01 specification, the
value zero (0) means the current cell spans all columns from the
current column to the last column in the table; in reality, however,
this feature is not supported in current browsers.
- height=number, percentage
-
Deprecated. Specifies the height of the cell in
number of pixels or by a percentage value relative to the table
height. The height specified in the first column will apply to the
rest of the cells in the row. The height values need to be consistent
for cells in a particular row. Pixel measurements are more reliable
than percentages, which only work when the height of the table is
specified in pixels.
- nowrap
-
Deprecated. Disables automatic text wrapping for
the current cell. Line breaks must be added with a
<br> or by starting a new paragraph. This
attribute is only supported in Internet Explorer 5 and higher.
- rowspan=number
-
Specifies the number of rows spanned by the current cell. The default
value is 1. According to the HTML 4.01 specification, the value zero
(0) means the current cell spans all rows from the current row to the
last row; in reality, however, this feature is not supported by any
browsers.
- valign=top|middle|bottom|baseline
-
Deprecated. Specifies the vertical alignment of
the text (or other elements) within the table cell. The default is
middle.
- width=number
-
Deprecated. Specifies the width of the cell in
number of pixels or by a percentage value relative to the table
width. The width specified in the first row will apply to the rest of
the cells in the column, and the values need to be consistent for
cells in the column.
Internet Explorer only
- bordercolor="#rrggbb" or color name
-
Defines the border color for the cell.
- bordercolorlight="#rrggbb" or color name
-
Defines the dark shadow color for the cell border.
- bordercolordark="#rrggbb" or color name
-
Defines the light highlight color of the cell border.
New in HTML 4.01
These attributes are part of the HTML standard but are not supported
by current browsers.
- abbr=text
-
Provides an abbreviated form of the cell's content.
- axis=text
-
Places a cell into a conceptual category, which could then be used to
organize or search the table in different ways.
- char=character
-
Specifies a character along which the cell contents will be aligned.
The default character is a decimal point (language-appropriate).
- charoff=length
-
Specifies the offset distance to the first alignment character
(char) on each line. If a line doesn't use
an alignment character, it should be horizontally shifted to end at
the alignment position.
- headers=id reference
-
Lists header cells (by id) that provide header
information for the current data cell. This is intended to make
tables more accessible to nonvisual browsers.
- scope=row|col|rowgroup|colgroup
-
Specifies the table cells for which the current cell provides header
information. A value of col indicates that the
current cell is the header for all the cells that fall below.
colgroup indicates the current cell is the header
for the column group that contains it. A value of
row means that the current cell is the header for
the cells in the rest of the row. rowgroup means
the current cell is the header for the containing rowgroup. This is
intended to make tables more accessible to nonvisual browsers.
<tfoot> | NN 6 MSIE 3, 4,
5, 5.5, 6 HTML 4.01 |
<tfoot>...</tfoot> (end tag optional) | |
Defines the foot of a table and should contain information about a
table's columns. It is one of the "row group" tags
introduced by Internet Explorer and proposed in the HTML 4.01
specification. A <tfoot> must contain at
least one row (<tr>).
See <tbody> for more information and a list
of supported attributes.
<th> | NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5 |
<th>...</th> (end tag optional) | |
Defines a table header cell. Table header cells function the same as
table data cells (<td>). Browsers generally
display the content of table header cells in bold text centered
horizontally and vertically in the cell (although some browsers
vary). The end tag is optional.
Attributes
The <th> tag uses the same attributes as the
<td> tag. See listing under
<td>.
<thead> | NN 6 MSIE 3, 4,
5, 5.5, 6 HTML 4.01 |
<thead>...</thead> (end tag optional) | |
Defines the head of the table and should contain information about a
table. It must contain at least one row
(<tr>). <thead> is
one of the "row group" tags introduced by Internet
Explorer and proposed in the HTML 4.01 specification.
See <tbody> for more information and a list
of supported attributes.
<tr> | NN 2, 3, 4, 6 MSIE 2, 3, 4, 5, 5.5, 6 HTML 4.01 WebTV Opera5 |
<tr>...</tr> (end tag optional) | |
Defines a row of cells within a table. A table row as delimited by
<tr> tags contains no content other than a
collection of table cells (<td>). Settings
made in the <tr> tag apply to all the cells
in that row, but individual cell settings override those made at the
row level.
Attributes
- align=left|center|right|justify|char
-
Deprecated. Aligns the text (or other elements)
within the cells of the current row. This attribute has been
deprecated by the HTML 4.01 specification in favor of positioning
with style sheets.
- bgcolor="#rrggbb" or color name
-
Specifies a color to be used in the row. A row's background
color overrides the color specified at the table level.
- char=character
-
Specifies a character along which the cell contents will be aligned.
The default character is a decimal point (language-appropriate). This
attribute is generally not supported by current browsers.
- charoff=length
-
Specifies the offset distance to the first alignment character
(char) on each line. If a line doesn't use
an alignment character, it should be horizontally shifted to end at
the alignment position. This attribute is generally not supported by
current browsers.
- valign=top|middle|bottom|baseline
-
Deprecated. Specifies the vertical alignment of
the text (or other elements) within cells of the current row.
Internet Explorer only
- background=url of image file
-
Specifies a graphic image to be used as a tile within the row.
- bordercolor="#rrggbb" or color name
-
Defines the border color for the row.
- bordercolorlight="#rrggbb" or color name
-
Defines the dark shadow color for the row border.
- bordercolordark="#rrggbb" or color name
-
Defines the light highlight color of the row border.
| | | 12.6. Java Applets | | 13.2. Introduction to Tables |
Copyright © 2002 O'Reilly & Associates. All rights reserved.
|