Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 20th of December 2014 12:29:51 PM

10.7. Tables

the various values for the property font-weight. A fairly obvious font-weight declaration is this:

B {font-weight: bold;}

This says, simply, that the B element should be displayed using a boldface font; or, to put it another way, a font that is heavier than is normal for the document, as shown in Figure 5-8. This is what we're used to, of course, since B does cause text to be boldfaced.

Figure 5-8

Figure 5-8. Making the B tag bold

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:


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. More than one auto

Now let us consider the cases where two of these three properties are set to auto. If both the margins are set to auto, then they are set to equal lengths, thus centering the element within its parent, as you can see from Figure 8-14:

P {width: 100px; margin-left: auto; margin-right: auto;}
not all) of this to be included in browsers released in the year 2000 or later.

First, in addition to the existing selector mechanisms like contextual selectors, we have several new selector symbols that will make it a lot easier to construct very specific, very sophisticated selections -- without having to resort to sprinkling classes or IDs throughout the whole document.

The most