Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 23rd of October 2017 02:37:49 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 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 stylesheet and come into play only if they're selected by the reader. Alternate style sheets

Unfortunately, as of this writing, browsers don't make it very easy to select alternate style sheets, assuming that they can do so at all. Should a browser be able to use alternate style sheets, it will use the values of the TITLE attributes to 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.

is one major difference between margins and padding when it comes toinline elements. Let's turn things around and talk about leftand right padding first off. Here, if we set values for the left orright padding, they will be visible, as Figure 7-60makes apparent.

B {padding-left: 10px; padding-right: 10px; background: silver;}
Figure 7-60

Figure 7-60. Padding on an inline element

Note the extra background space that appears on either end of theboldfaced text. There's your padding. is set it to the default value of none. This isgood practice because list-style-image isinherited -- so any nested lists will pick up the image as thebullet, unless you prevent this from happening:

UL {list-style-image: url(ohio.gif); list-style-type: square;}UL UL {list-style-image: none;}

Since the nested list inherits the item typesquare but has been set to use no image for itsbullets, squares are used for the bullets in the nested list, aselement. Thus, applying the following styles to the BODY and the fifth paragraph in a document would lead to a situation similar to that shown in Figure 9-20:

BODY {position: relative;}
<P STYLE="position: absolute; top: 0; right: 25%; left: 25%; bottom: auto;
width: 50%; height: auto; background: silver;">...</P>
Figure 9-20

Figure 9-20. An absolutely positioned paragraph

The paragraph is now positioned at the very beginning of the document, half as wide as the document's width and overwriting