HTML The Definitive Guide (117 page)

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

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

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

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