Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 31st of January 2015 12:10:49 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:

table
inline-table
table-column-group
table-column
table-row-group
table-row
table-cell
table-caption
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:

that some fonts have a specific small-caps face. Thus, a fontproperty is used to select that face.

What happens if no such face exists? There are two options providedin the specification. The first is for the user agent to create asmall-caps face by scaling uppercase letters on its own. The secondis simply to make all letters uppercase and the same size, exactly asif the declaration text-transform:uppercase; had been used instead, as shown inFigure 5-30. This is obviously not an ideal

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.

H4 {color: #808080;} /* set H4's to be medium gray */

If you aren't familiar with this notation, here's a quick primer. First, hexadecimal means base-16 counting, so the basic unit is groups of 16, not the groups of 10 to which we're accustomed. In hexadecimal numbering, the valid digits are 0 through 9 and A through F. Once you've reached F, the next number is 10. Thus, a child learning to count in hex would learn this basic progression:

Of course, since we're dealing in shades of gray, all three RGB numbers are the same in each statement. If any one of them was different from the others, then a color would start to emerge. If, for example, rgb(50%,50%,50%) were modified to be rgb(50%,50%,60%), the result would be a medium gray with just a hint of blue.

The equivalents for the various rainbow primaries, plus a few others, are presented in Table 3-1.

DIV {position: relative;}P.A {position: absolute; top: 0; right: 0; width: 15em; height: auto;margin-left: auto;}P.B {position: absolute; bottom: 0; left: 0; width: 10em; height: 50%;margin-top: auto;}

This is an important point to always keep in mind: only positionedelements establish containing blocks for their descendant elements. Iknow this has come up before, but it's so fundamental that itneeds to be repeated.