home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Book HomeHTML & XHTML: The Definitive GuideSearch this book

10.2. Table Tags

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.

10.2.1. The <table> Tag

The <table> tag and its </table> end tag define and encapsulate a table within the body of your document. Unless otherwise placed within the browser window by style sheet, paragraph, division-level, or other alignment options, the browser stops the current text flow, breaks the line, inserts the table beginning on a new line, and then restarts the text flow on a new line below the table.

<table>

Function:

Define a table

Attributes:

ALIGN

ONCLICK

BACKGROUND

ONDBLCLICK

BGCOLOR

ONKEYDOWN

BORDER

ONKEYPRESS

BORDERCOLOR

ONKEYUP

BORDERCOLORLIGHT

ONMOUSEMOVE

CELLPADDING

ONMOUSEOUT

CELLSPACING

ONMOUSEOVER

CLASS

ONMOUSEUP

COLS

RULES

DIR

STYLE

FRAME

SUMMARY

HEIGHT

TITLE

HSPACE

VALIGN

ID

VSPACE

LANG

WIDTH

NOWRAP

End tag:

</table>; never omitted

Contains:

table_content

Used in:

block

The only content allowed within the <table> is one or more <tr> tags, which define each row of table contents, along with the various table sectioning tags: <thead>, <tfoot>, <tbody>, <col>, and <colgroup>.

10.2.1.3. The border attribute

The optional border attribute for the <table> tag tells the browser to draw lines around the table and the rows and cells within it. The default is no borders at all. You may specify a value for border, but you don't have to with HTML. Alone, the attribute simply enables borders and a set of default characteristics different for each of the popular browsers (reexamine the Figure 10-1 table; it has borders). With XHTML, use border="border" to achieve the same default results. Otherwise, in HTML or with XHTML, supply an integer value for border equal to the pixel width of the 3D chiseled-edge lines that surround the outside of the table and make it appear to be embossed onto the page.

10.2.1.4. The frame and rules attributes

With Netscape Navigator 4, the border attribute is all or nothing, affecting the appearance and spacing both of the frame around the table and the rule lines between data cells. Internet Explorer Version 4 and later, as well as the latest Netscape Navigator Version 6, on the other hand, let you individually modify the various line segments that make up the borders around the table (frame) as well as around the data cells (rules).

The standard frame attribute modifies border's effects for the lines that surround the table. The default value -- what you get if you don't use frame at all -- is box, which tells the browser to draw all four lines around the table. The value border does the same thing as box. The value void removes all four of the frame segments. The frame values above, below, lhs, and rhs draw the various border segments on the top, bottom, left, and right side, respectively, of the table. The value hsides draws borders on the top and bottom (horizontal) sides of the table; vsides draws borders on the left and right (vertical) sides of the table.

With standard tables (supported in Internet Explorer 4 and later, and in Netscape 6), you also may control the thickness of a table's internal cell borders via the rules attribute. The default behavior, represented by the value of all, is to draw borders around all cells. Specifying groups places thicker borders between row and column groups defined by the <thead>, <tbody>, <tfoot>, <col>, and <colgroup> tags. Using rows or cols places borders only between every row or column, respectively, while using none removes borders from every cell in the table.

10.2.1.5. The bordercolor, bordercolorlight, and bordercolordark attributes

The popular browsers normally draw a table border in three colors, using light and dark variations on the document's background color to achieve a 3D effect. The nonstandard bordercolor attribute lets you set the color of the table borders and rules to something other than the background (if borders are enabled, of course). The bordercolor attribute's value can be either an RGB hexadecimal color value or a standard color name, both of which are described fully in Appendix G, "Color Names and Values".

Internet Explorer also lets you set the border edge colors individually with special extension attributes: the bordercolorlight and bordercolordark colors shade the lighter and darker edges of the border.

The effectiveness of the 3D beveled-border effect is tied to the relationship of these two colors. In general, the light color should be about 25 percent brighter than the border color, and the dark color should be about 25 percent darker.

10.2.1.8. Combining border, cellspacing, and cellpadding attributes

The interactions between the border, cellpadding, and cellspacing attributes of the <table> tag combine in ways that can be confusing. Figure 10-2 summarizes how the attributes create interior and exterior borders of various widths.

While all sorts of combinations of the border and cellspacing attributes are possible, these are the most common:

  • border=1 and cellspacing=0 produces the narrowest possible interior and exterior borders: two pixels wide.

  • border=n and cellspacing=0 makes the narrowest possible interior borders (two pixels wide), with an external border that is n plus one pixels wide.

  • border=1 and cellspacing=n tables have equal-width exterior and interior borders, all with chiseled edges just one pixel wide. All borders will be n plus two pixels wide.

Figure 10-2

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

10.2.1.11. The width and height attributes

Browsers will automatically make a table only as wide as needed to correctly display all of the cell contents. If necessary, you can make a table wider with the width attribute.

The value of the width attribute is either an integer number of pixels or a relative percentage of the screen width, including values greater than 100 percent. For example:

<table width=400>

tells the extended browser to make the table 400 pixels wide, including any borders and cell spacing that extend into the outer edge of the table. If the table is wider than 400 pixels, the browser ignores the attribute. Alternatively:

<table width="50%">

tells the browser to make the table half as wide as the display window. Again, this width includes any borders or cell spacing that extend into the outer edge of the table and has no effect if the table normally is more than half the user's current screen width.

Use relative widths for tables you want to resize automatically to the user's window; for instance, tables you always want to extend across the entire window (<table width="100%">). Use an absolute width value for carefully formatted tables whose contents will become hard to read in wide display windows.

For Netscape Navigator and Internet Explorer, you can use the nonstandard height attribute to suggest a recommended height for the table. The browser will make the table no shorter than this height but may make the table taller if needed to contain the table's contents. This attribute is useful when trying to stretch tables to fit in a frame or some specific area of a document but is of little use otherwise, particularly since it is not a standard attribute.

10.2.2. Common Table Attributes

The HTML and XHTML standards, combined with the Cascading Style Sheets (CSS) standard, provide a number of attributes common not only to the <table> tag and the other table creation tags, but for most other tags as well. Except for the CSS-related attributes class and style for controlling the table display, none of the other standard attributes are yet fully supported by any of the popular browsers.

10.2.3. The <tr> Tag

Make a new row in a table with the <tr> tag. Place within the <tr> tag one or more cells containing headers, defined with the <th> tag, and data, defined with the <td> tag (see Section 10.2.4, " The <th> and <td> Tags"). The <tr> tag accepts a number of special attributes that control its behavior, along with the common table attributes described in Section 10.2.2, "Common Table Attributes"

<tr>

Function:

Define a row within a table

Attributes:

ALIGN

ONDBLCLICK

BGCOLOR

ONKEYDOWN

BORDERCOLOR

ONKEYPRESS

BORDERCOLORDARK

ONKEYUP

BORDERCOLORLIGHT

ONMOUSEDOWN

CHAR

ONMOUSEMOVE

CHAROFF

ONMOUSEOUT

CLASS

ONMOUSEOVER

DIR

ONMOUSEUP

ID

STYLE

LANG

TITLE

NOWRAP

VALIGN

ONCLICK

End tag:

</tr>; may be omitted in HTML

Contains:

tr_content

Used in:

table_content

Every row in a table has the same number of cells as the longest row; the browser automatically creates empty cells to pad rows with fewer defined cells.

10.2.3.1. The align and valign attributes

The align attribute for the <table> tag may be deprecated in the HTML and XHTML standards, but it is alive and kicking for <tr> and other table elements. The align attribute for the <tr> tag lets you change the default horizontal alignment of all the contents of the cells in a row. The attribute affects all the cells within the current row, but not subsequent rows.

An align attribute value of left, right, center, justify, or char causes the browser to align the contents of each cell in the row against the left or right edge, in the center of the cell, spread across the cell, or to a specified character in the cell, respectively.

Similarly, change the default vertical alignment for the contents of data cells contained within a table row with the valign attribute. Normally, the browsers render cell contents centered vertically. By including the valign attribute in the <tr> tag with a value of top, bottom, or baseline, you tell the browser to place the table row's contents flush against the top or bottom of their cells or aligned to the baseline of the top line of text in other cells in the row (Figure 10-3). The value middle, although acceptable, has no real effect since it simply reiterates the default vertical alignment:

<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>
Figure 10-3

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

You also may specify the horizontal and vertical alignments for individual cells within a row (Section 10.2.4.1, "The align and valign attributes"). Use the alignment attributes in the <tr> tag to specify the most common cell content justifications for the row (if not the default), and use a different align or valign attribute for those individual cells that deviate from the common alignment.

Table 10-1 contains the horizontal (align) and vertical (valign) table cell- content attribute values and options. Values in parentheses are the defaults for the popular browsers.

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

Attribute

Netscape and IE Headers

Netscape and IE Data

Left

(Left)

align

(Center)

Center

Right

Right

Justify[63]

Justify[63]

Char[63]

Char[63]

Top

Top

valign

(Center)

(Center)

Bottom

Bottom

Baseline

Baseline

[63]Value not yet supported.

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.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.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.5. The <caption> Tag

A table commonly needs a caption to explain its contents, so the popular browsers provide a table-caption tag. Authors typically place the <caption> tag and its contents immediately after the <table> tag, but it can be placed nearly anywhere inside the table and between the row tags. The caption may contain any body content, much like a cell within a table.

<caption>

Function:

Define a table caption

Attributes:

ALIGN

ONKEYUP

CLASS

ONMOUSEDOWN

DIR

ONMOUSEMOVE

ID

ONMOUSEOUT

LANG

ONMOUSEOVER

ONCLICK

ONMOUSEUP

ONDBLCLICK

STYLE

ONKEYDOWN

TITLE

ONKEYPRESS

VALIGN

End tag:

</caption>; never omitted

Contains:

body_content

Used in:

table_content

10.2.5.2. The many other attributes

Like the other table tags, <caption> supports the many and various language-, event-, and styles-related attributes, which are described in Section 10.2.2, "Common Table Attributes". Use them in good health. Just be sure to use the contextual selector TABLE CAPTION when referring to caption styles at the document level or in external style sheets.



Library Navigation Links

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







??????????????@Mail.ru