HTML The Definitive Guide (117 page)

Authors: Chuck Musciano Bill Kennedy

BOOK: HTML The Definitive Guide

12.54Mb size Format: txt, pdf, ePub

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

11.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 11.1
. Use the colspan attribute in a table header or data tag to extend an HTML 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:

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
tag as their contents if you want Netscape's embossed border around them.)

11.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 or 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:

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

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

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 may explicitly include in the same tag, as described earlier.

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

tag, which then forces a break so that the contents continue on a new line inside the table cell.

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

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.

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

tag in section
Section 11.2.1.5
for details.

The values for these three attributes override any values set for the containing

or tag.

Their values can be either an RGB color value or a standard color name, both of which are described fully in
Appendix F
.

11.2.4.10 The char and charoff attributes
Just as for the

tag, you may use the char attribute with , , or tag) or column group (defined by a or tag) with the header cell.

Neither attribute is supported by any of the popular browsers.

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

This attribute is not supported by any of the popular browsers.

11.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. Thus, if you used axis=meals on the cells containing meal purchases, the browser could locate those cells, extract their values, and produce a sum. This capability is not yet supported by any of the popular browsers.

11.2.5 The

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 a integer number 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 new with HTML 4.0, and consequently not supported by any of the popular browsers (yet).

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

Tag

A table commonly needs a caption to explain its contents, so the extended browsers provide a table-caption tag. Authors typically place the

tag and its contents immediately after the 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.

; never omitted
Contains:
body_content
Used in:
table_content
11.2.5.1 The align and valign attributes
By default, browsers place the caption's contents centered above the table. You may place it below the table with the align attribute set to the value bottom (the value top, of course, is equivalent to the default).
With Internet Explorer, you may alternatively use the align attribute to control the horizontal position of the caption and use the valign attribute to change the caption's vertical position. Set the align attribute to left, center (the default), or right to position the caption to the respective location relative to the table. Use the valign attribute to place a caption at the top or bottom of the table. The other browsers ignore Internet Explorer's different caption-align values and attributes.
11.2.5.2 The many other attributes
Like the other table tags,

HTML The Definitive Guide (117 page)

Other books