Table Tags (HTML & XHTML: The Definitive Guide, 4th Edition)

A wide variety of tables can be created with only five tags: the <table> tag, which encapsulates a table and its elements in the document's body content; the <tr> tag, which defines a table row; the <th> and <td> tags, which define the table's headers and data cells; and the <caption> tag, which defines a title or caption for the table. Beyond these core tags, you may also define and control whole sections of tables, including adding running headers and footers, with the <colgroup>, <col>, <tbody>, <thead>, and <tfoot> tags. Each tag has one or more required and optional attributes, some of which affect not only the tag itself, but also related tags.

<table border="border"> <tr> <th>Alignment</th> <th>Top</th> <th>Baseline</th> <th>Center</th> <th>Bottom</th> </tr> <tr align="center"> <th><h1>Baseline_ _<br />Another line</h1></th> <td valign="top">AAyy</td> <td valign="baseline">_AAyy_</td> <td valign="center">AAyy</td> <td valign="bottom">AAyy</td> </tr> </table>

Attribute

Netscape and IE Headers

Netscape and IE Data

Left

(Left)

align

(Center)

Center

Right

Justify[63]

Char[63]

Top

valign

(Center)

Bottom

Baseline

10.2.4. The <th> and <td> Tags

The <th> and <td> tags go inside the <tr> tags of a table to create the cells and contents within the row. The tags operate similarly; the only real differences are that the browsers render header text -- meant to entitle or otherwise describe table data -- in boldface font style and that the default alignment of their respective contents may be different than for data. Data typically gets left-justified by default; headers get centered (Table 10-1).

<th> and <td>

Function:

Define table data and header cells

Attributes:

ABBR
NOWRAP

ALIGN
ONCLICK

AXIS
ONDBLCLICK

BACKGROUND
ONKEYDOWN

BGCOLOR
ONKEYPRESS

BORDERCOLOR
ONKEYUP

BORDERCOLORDARK
ONMOUSEDOWN

BORDERCOLORLIGHT
ONMOUSEMOVE

CHAR
ONMOUSEOUT

CHAROFF
ONMOUSEOVER

CLASS
ONMOUSEUP

COLSPAN
ROWSPAN

DIR
SCOPE

HEADERS
STYLE

HEIGHT
TITLE

ID
VALIGN

LANG
WIDTH

End tag:

</th> or </td>; may be omitted in HTML

Contains:

body_content

Used in:

tr_content

Like those available for the table row (<tr>) tag, the table cell tags support a rich set of style and content-alignment attributes you may apply to a single data or header cell. These attributes override the default values for the current row. There are also special attributes that control the number of columns or rows a cell may span in the table. The <th> and <td> tags also accept the common table attributes described in Section 10.2.2, "Common Table Attributes".

The contents of the <th> and <td> tags can be anything you might put in the body of a document, including text, images, forms, and so on -- even another table. And, as described earlier, the browser automatically creates a table large enough, both vertically and horizontally, to display all the contents of any and all the cells.

If a particular row has fewer header or data items than other rows, the browser adds empty cells at the end to fill the row. If you need to make an empty cell before the end of a row, for instance, to indicate a missing data point, create a header or data cell with no content.

Empty cells look different than those containing data or headers if the table has borders: the empty cell will not be seemingly embossed onto the window, but instead is simply left blank. If you want to create an empty cell that has incised borders like all the other cells in your table, be sure to place a minimal amount of content in the cell: a single <br> tag, for instance.

10.2.4.1. The align and valign attributes

The align and valign attributes are identical to those of the same name for the table row tag (<tr>; see Section 10.2.3, "The <tr> Tag"), except that when used with a <th> or <td> tag, they control the horizontal or vertical alignment of content in just the current cell. Their value overrides any alignment established by the respective align or valign attribute of the <tr> tag, but does not affect the alignment of subsequent cells. See Table 10-1 for alignment details.

You may set the align attribute's value to left, right, or center, causing the browsers to align the cell contents against the left or right edge, or in the center of the cell, respectively. In addition, Internet Explorer supports a value of justify to fill each line of text so that it is flush to both sides of the cell. The valign attribute may have a value of top, bottom, middle, or baseline, telling the browser to align the cell's contents to the top or bottom edge, or in the center of the cell, or (Netscape only) to the baseline of the first line of text in other cells in the row.

10.2.4.2. The width attribute

Like its twin in the <table> tag that lets you widen a table, the width attribute for table cell tags lets you widen an individual cell and hence the entire column it occupies. You set the width to an integer number of pixels or a percentage indicating the cell's width as a fraction of the table as a whole.

For example:

<th width=400>

sets the current header cell's width, and hence the entire column of cells, to 400 pixels wide. Alternatively:

<td width="40%">

creates a data cell with a column occupying 40 percent of the entire table's width.

Since Netscape and Internet Explorer make all cells in a column the same width, you should place a width attribute in only one cell within a column, preferably the first instance of the cell in the first row, for source readability. If two or more cells in the same column happen to have width attributes, the widest one is honored. You can't make a column thinner than the minimum needed to display all of the cells in the column. So, if the browser determines that the column of cells needs to be at least 150 pixels wide to accommodate all the cells' contents, it will ignore a width attribute in one of the column's cell tags that attempts to make the cell only 100 pixels wide.

10.2.4.3. The height attribute

The height attribute lets you specify a minimum height, in pixels, for the current cell. Since all cells in a row have the same height, this attribute need only be specified on one cell in the row, preferably the first. If some other cell in the row needs to be taller to accommodate its contents, this attribute is ignored and all the cells in the row will be set to the larger size.

By default, all the cells in a row are the height of the largest cell in the row that just accommodates its contents.

10.2.4.4. The colspan attribute

It's common to have a table header that describes several columns beneath it, like the headers we use in Table 10-1. Use the colspan attribute in a table header or data tag to extend a table cell across two or more columns in its row. Set the value of the colspan attribute to an integer value equal to the number of columns you want the header or data cell to span. For example:

<td colspan="3">

tells the browser to make the cell occupy the same horizontal space as three cells in rows above or below it. The browser flows the contents of the cell to occupy the entire space.

What happens if there aren't enough extra cells on the right? The browser just extends the cell over as many columns as exist to the right; it doesn't add extra empty cells to each row to accommodate an over-extended colspan value. You may defeat that limitation by adding the needed extra, but content-less, cells to a single row. (Give them a single <br> tag as their contents if you want Netscape's embossed border around them.)

10.2.4.5. The rowspan attribute

Just as the colspan attribute layers a table cell across several columns, the rowspan attribute stretches a cell down two or more rows in the table.

Include the rowspan attribute in the <th> or <td> tag of the uppermost row of the table where you want the cell to begin and set its value equal to the number of rows you want it to span. The cell then occupies the same space as the current row and an appropriate number of cells below that row. The browser flows the contents of the cell to occupy the entire extended space. For example:

<td rowspan="3">

creates a cell that occupies the current row plus two more rows below that.

Like the colspan attribute, the browser ignores over-extended rowspan attributes and will only extend the current cell down rows you've explicitly defined by other <tr> tags following the current row. The browsers will not add empty rows to a table to fill a rowspan below the last defined row in a table.

10.2.4.6. Combining colspan and rowspan

You may extend a single cell both across several columns and down several rows by including both the colspan and rowspan attributes in its table header or data tag. For example:

<th colspan="3" rowspan="4">

creates a header cell that, as you might expect, spans across three columns and down four rows, including the current cell and extending two more cells to the right and three more cells down. The browser flows the contents of the cell to occupy the entire space, aligned inside according to the current row's alignment specifications or to those you explicitly include in the same tag, as described earlier.

10.2.4.7. The nowrap attribute

Browsers treat each table cell as though it were a browser window unto itself, flowing contents inside the cell as they would common body contents (although subject to special table-cell alignment properties). Accordingly, the browsers automatically wrap text lines to fill the allotted table cell space. The nowrap attribute, when included in a table header or data tag, stops that normal word wrapping. With nowrap, the browser assembles the contents of the cell onto a single line, unless you insert a <br> or <p> tag, which then forces a break so that the contents continue on a new line inside the table cell.

10.2.4.8. The bgcolor and background attributes

Yet again, you can change the background color -- this time for an individual data cell. This attribute's value is either an RGB hexadecimal color value or a standard color name. Both the syntax of color values and the acceptable color names are provided in Appendix G, "Color Names and Values".

The background attribute, supported only by Internet Explorer, supplies the URL of an image that is tiled to fill the background of the cell. The image will be clipped if the cell is smaller than the image.

Neither background nor bgcolor will override a related style sheet property.

10.2.4.9. The bordercolor, bordercolorlight, and bordercolordark attributes

Internet Explorer lets you alter the colors that make up an individual cell's border -- if table borders are turned on with the border attribute, of course. See the respective attributes' descriptions under the <table> tag in Section 10.2.1.5, "The bordercolor, bordercolorlight, and bordercolordark attributes" for details.

The values for these three attributes override any values set for the containing <table> or <tr> tag. Their values can be either an RGB color value or a standard color name, both of which are described fully in Appendix G, "Color Names and Values".

10.2.4.10. The char and charoff attributes

Just as for the <tr> tag, you may use the char attribute with <th> or <td> to indicate which letter in the table cell should be the axis for alignment, such as for decimal numbers. You need not include a value with char. If you don't, the default character is language-based: it's a period in English, for example, and a comma in French. Include the char attribute and a single letter as its value to specify a different alignment character.

Use the charoff attribute and an integer value to specify the offset to the first occurrence of the alignment character in the cell. If a cell doesn't include the alignment character, it should be horizontally shifted to end at the alignment position.

The char and charoff attributes are standard in HTML 4 and XHTML but are not yet supported by any of the popular browsers.

10.2.4.11. The headers and scope attributes

The headers attribute associates header cells with a data cell in the table. The value of this attribute is a quote-enclosed list of names that have been defined for various header cells using the id attribute. The headers attribute is especially useful for nonvisual browsers, which might speak the contents of a header cell before presenting the associated data cell contents.

Use the scope attribute to associate data cells with a header cell. With a value of row, all cells in the header's row are associated with the header cell. Specifying col binds all the cells in the current column to the cell. Using rowgroup or colgroup binds all the cells in the cell's row group (defined by a <thead>, <tbody>, or <tfoot> tag) or column group (defined by a <col> or <colgroup> tag) with the header cell.

10.2.4.12. The abbr attribute

The value of this attribute should be an abbreviated description of the cell's contents. When short on space, browsers might choose to render the abbreviation instead, or to use it in nonvisual contexts.

10.2.4.13. The axis attribute

Tables are usually chock-full of data, prompting the reader to ask questions. A tabular expense report, for example, naturally leads to queries like "How much did I spend on meals?" or "What did my cab fares total?" In the future, browsers may support such queries with the help of the axis attribute.

The value of this attribute is a quote-enclosed list of category names that might be used to form a query. As a result, if you used axis=meals on the cells containing meal purchases, the browser could locate those cells, extract their values, and produce a sum.

10.2. Table Tags

10.2.1. The <table> Tag

<table>

10.2.1.1. The align attribute (deprecated)

10.2.1.2. The bgcolor and background attributes

10.2.1.3. The border attribute

10.2.1.4. The frame and rules attributes

10.2.1.5. The bordercolor, bordercolorlight, and bordercolordark attributes

10.2.1.6. The cellspacing attribute

10.2.1.7. The cellpadding attribute

10.2.1.8. Combining border, cellspacing, and cellpadding attributes

Figure 10-2. The border, cellspacing, and cellpadding attributes of a table

10.2.1.9. The cols attribute

10.2.1.10. The valign and nowrap attributes

10.2.1.11. The width and height attributes

10.2.1.12. The summary attribute

10.2.2. Common Table Attributes

10.2.2.1. The id and title attributes

10.2.2.2. The dir and lang attributes

10.2.2.3. The class and style attributes

10.2.2.4. The event attributes

10.2.3. The <tr> Tag

<tr>

10.2.3.1. The align and valign attributes

Figure 10-3. Effects of the valign attribute on table cell content alignment

Table 10-1. Table Cell-Content Alignment Attribute Values and Options

10.2.3.2. The char and charoff attributes

10.2.3.3. The bgcolor attribute

10.2.3.4. The bordercolor, bordercolorlight, and bordercolordark attributes

10.2.3.5. The nowrap attribute