Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 25th of February 2018 10:20:48 PM

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

Here's where the famous phrase returns: "there may beimplementation-specific limits." User agents aren'trequired to support this type of effect.

7.5.4. Padding: Known Issues

In the first place, padding and Navigator 4.x just plain don't getalong. The main problem is that you can set padding on an elementwith a background color, but the background won't extend into 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.

spend time on it here. There is a brief discussion of the markerproperties in Chapter 10, "CSS2: A Look Ahead".

8.2.4. Block-Level Replaced Elements

Block-levelreplaced elements are also subject to a few differences in howformatting is handled. The most important is that replaced elementsare assumed to have an intrinsic height and width; for example, an red is simply rgb(100%,0%,0%),whereas maroon is more like(50%,0%,0%). In order to get a color between thosetwo, you might try this:

H1 {color: rgb(75%,0%,0%);}

This makes the red component of the color lighter than that ofmaroon, but darker than that ofred. If, on the other hand, you wished to create apale red color, then you would want to raise the other two values: