Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 28th of April 2017 06:24:31 AM

10.7. Tables

Perhaps as a result of a generic need to be able to describe table layout -- something CSS1 lacks -- CSS2 includes a handful of features that apply directly to tables and table cells. First, there are 10 new table-related values for display:

  • http://  = HyperText Transfer Protocol (conventionalweb pages)
  • ftp://    = File Transfer Protocol
  • gopher://  = Gopher information search
  • mailto:  = compose and send e-mail (note: no slashes)
  • table-header-group table-footer-group

While the effects of most of these are obvious from their names, at least two may not be familiar to you. table-header-group and table-footer-group are used to mark the header and footer of a table. These are displayed, respectively, above or below all the rows of the table, but not outside of the table's caption.

Another interesting effect is that you can align text on a character by using the text-align property. For example, if you wanted to line up a column of figures on a decimal point, you might declare:

TD { text-align: "." }

As long as a set of cells are grouped into a column, their content will be aligned so that the periods all line up along a vertical axis.

Far from relying on existing properties, CSS2 provides a whole array of brand-new properties in the table section. Here are a few of them:

There are also properties describing how visibility and vertical-align are applied to tables. There is also a caption-side property, which functions exactly the same as the ALIGN attribute on the <CAPTION> tag, and the property speak-header-cell, which controls how header cells are handled by speech-generating browsers (more on that later).

Library Navigation Links

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

TEXTAREA elements should change their size when they are in focus. User agents are not required to reflow the document based on styles assigned to these pseudo-elements, although some may do so -- it remains to be seen. :lang

DIV, or another TABLE. Thus, ifan image has a border, and the BODY is its parent,given this rule:

BODY {color: purple;}

then, by default, the border around the image will be purple. Ofcourse, to get that border to appear, you have to do a little workfirst.

of this are shown in Figure 8-31.

Figure 8-31

Figure 8-31. Keeping floats from overlapping

The advantage of this rule is that, since you don't have toworry about one floated element obscuring another, you can be assuredthat all of your floated content will be visible. This makes floatinga fairly safe thing to do. The situation is markedly different whenusing positioning, where it is very easy to cause elements tooverwrite one another.

0.125in). The usual caveats apply here; even if you use a valid length measure like 4cm , the browser (or the operating system) may have an incorrect metric for real-world measures. Thus, when you display your document on a monitor, a ruler might reveal that the line height was not exactly four centimeters. For more details, see
Chapter 3, "Units and Values".

Percentages, as well as em and ex, are calculated with respect to the element's font-size. Thus, this markup is