Book HomeWeb Design in a NutshellSearch this book

Chapter 13. 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.

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

<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>NN 6 MSIE 3, 4, 5, 5.5, 6 HTML 4.01

<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, 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

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



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.