Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 23rd of March 2017 09:01:26 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:


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 Negative margins

So far, this probably all seems ratherstraightforward, and you may be wondering why I said things could becomplicated. As it turns out, the complication is that margins canhave negative values.

You'll remember that I said the second-simplest rule ofhorizontal formatting was this: the total of the seven horizontalproperties always equals the width of the parent 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.

It's also possible to mix up the types of length value you use. You aren't restricted to using a single length type in a given rule, as shown here:

H2 {margin: 14px 5em 0.1in 3ex;}  /* value variety! */

Figure 7-9 shows us, with a little extra annotation, the results of this declaration.

7.3.2. Percentages and Margins

such as "2.1" or "7.1.3." This can, however,be done under CSS2 and is briefly discussed
in Chapter 10, "CSS2: A Look Ahead".

7.7.3. List Item Positions

There is one other thing you can do toinfluence the appearance of list items under CSS1, and that'schange the position of the bullet itself, in relation to the contentof the list item. This is accomplished with