Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 18th of March 2018 03:02:59 AM

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 visible background. As you can see, the floated image sticks out ofthe bottom of its parent element. Of course, it did so in the firstexample, but it was less obvious there, because we couldn't seethe background. There is nothing forbidden about this behavior. Thefloating rules we discussed earlier only address the left, right, andtop edges of floats and their parents. The deliberate omission ofbottom edges permits the behavior in Figure 8-40.


In practice, some browsers do not do this correctly. Instead, they 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.

sheets but are external to the HTML document. (Go figure.)

In order to successfully load an external style sheet, LINK must be placed inside the HEAD element but may not be placed inside any other element, rather like TITLE or STYLE. This will cause the web browser to locate and load the style sheet and use whatever styles it contains to render the HTML document, in the manner shown in Figure 1-2.

The background is the area of the content box and the padding and isalways behind the foreground of the element. Therefore, the declaredbackground color is applied to both the element's content boxand its padding, as illustrated in Figure 6-14:

P {background-color: gray;}
Figure 6-14

Figure 6-14. Background gray for paragraphs

If you wish the color to extend out a little bit from the text in theelement, then you need only add some padding to the mix, with theresult shown in Figure 6-15:

vertical-align accepts any one of eight keywords, or a percentage value, but never both. The keywords are a mix of the familiar and unfamiliar: baseline (the default value), sub, super, bottom , text-bottom , middle, top, and text-top. We'll examine how each works in turn.

Figure 8-7

Figure 8-7. Element boxes are as wide as the width of their parent element

Thus, if the width of the DIV is 30em , then the sum total of the content width, padding, borders, and margins of each paragraph will be 30em. In Figure 8-7, the "blank" space around the paragraphs is actually their margins. (If the DIV had any padding, there would be even more blank space, but that wasn't the case here.)


The fictional LINE element actually clarifies the behavior that results from setting line-height on a block-level element. According to the CSS specification, declaring line-height on a block-level element sets a minimum line-box height for the content of that block-level element. Thus, declaring P.spacious {line-height: 24pt;} means that the minimum height for each line box is 24 points. Technically, the