Tables

Contents:

Summary of Table Tags
Introduction to Tables
Basic Table Structure
Affecting Table Appearance
Table Troubleshooting
Tips and Tricks
Standard Table Templates
Multipart Images in 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.

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>...</caption>

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> (no end tag)

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, * sets the column two times wider than the other columns; * 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>...</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 (*). * sets the column width at the minimum necessary to hold the column's contents.

<table>...</table>

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 "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>...</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>...</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>...</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>...</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>...</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>...</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.