Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 19th of January 2017 01:53:07 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 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.

P.starry {background-image: url(;
background-color: black; color: white;}
<P CLASS="starry">It's the end of autumn, which means the stars will be
brighter than ever!  Join us...

Besides, if you have the image do something other than fully tile across the entire background of the document, then you'll need a color to cover the parts that the image doesn't. Speaking of which ...


Figure 8-35

Figure 8-35. Keeping floats level with their context

7. A left (or right) floating element that has another floating element to its left (or right) may not have its right outer edge to the right (or left) of its containing block's right (or left) edge.

In other words, a floating element cannot stick out beyond the edge of its containing element, unless it's too wide to fit on its



italic | oblique | normal

the negative is added to the positive -- and the resulting valueis the distance between the elements.

To see what this means, let's start with a paragraph that has anegative top margin and no margins on its other sides -- this willkeep the example simple. In addition, we'll make the paragraphbold, so that it's easier to distinguish from its neighbors:

<P STYLE="margin: -1.75em 0 0 0; font-weight: bold;">This paragraph has a negative top margin...