Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 29th of May 2015 08:02:42 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
style is set, then the value of border-widthdefaults to medium , not zero. The exact width ofmedium will depend on the user agent'sprogramming, but a common value is 2 or 3 pixels.

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.

property color.

color

This propertyaccepts as a value any valid color, as discussed in Chapter 3, "Units and Values", such as #FFCC00 orrgb(100%,80%,0%). It has the effect of setting thecolor of the text in the element, as shown in Figure 6-1:

<P STYLE="color: gray;">This paragraph has a gray foreground.</P>

font-weight is inherited, so if you set a paragraph to be bold, then all of its children will inherit that boldness, as we see in Figure 5-9.

P.one {font-weight: bold;}
Figure 5-9

Figure 5-9. Inherited font weight

This isn't unusual, but the situation gets interesting when you use the last two values we have to discuss: bolder and lighter. In general terms, these keywords have

Table 3-2. Numeric RGB Equivalents for Common Colors

As expected, any value outside the range of-255 is clipped, just as with percentages -- although in thiscase, of course, the values are clipped to 0 and255:

H1 {color: rgb(0,0,0);}                /* black */H2 {color: rgb(127,127,127);}          /* gray */H3 {color: rgb(255,255,255);}          /* white */P.one {color: rgb(300,2500,101);}      /* white */the Bold font face. Finally, 600 is assigned tothe next-heavier face, which is, of course, the Bold face.

font-weight is inherited, so if you set aparagraph to be bold, then all of its childrenwill inherit that boldness, as we see in Figure 5-9.

P.one {font-weight: bold;}
Figure 5-9

Figure 5-9. Inherited font weight

This isn't unusual, but the situation gets interesting when you element that is the first child of another element. For example, you might want to make the first child of every DIV italicized instead of normal text, as long as that first child is a paragraph (shown in Figure 10-11):

Figure 10-11

Figure 10-11. Selecting styles for certain first children

The very first paragraph is italicized because it is the first child of the BODY element. Similarly, the first paragraph in the first DIV is italicized because it is the first child of the DIV, even though text