Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 27th of August 2015 11:22:20 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).

does not exist. Those words were picked carefully because they help explain what's going on here. Since the border doesn't exist, it can't have any width, so the width is automatically set to 0 (zero). This may seem completely backward, but it actually makes a great deal of sense. After all, if a drinking glass is empty, you can't really describe it as being half-full of nothing. You can only discuss the depth of a glass's contents if it has actual contents. In the same way, talking about the width of a border only makes sense in the context of borders that have some existence.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

Figure 8-15

Figure 8-15. Centering an element with automatic margins


As of this writing, only Internet Explorer 4.5 and 5 for the Macintosh and Opera 3.6 will center elements using auto margins.

The other possibility is when one of the margins and the width are set to be auto. In this case, then the margin set to be auto is reduced to zero:

P[class="directions"] {color: red;}
P.directions {color: red;}
DIV[ID="abc123"] {color: blue;}
DIV#abc123 {color: blue;}

Obviously, the latter rule in each pair is much simpler to type and edit, and you'll probably use such rules in most circumstances.

If you want an exact match, you can use an ordinary attribute selector. Thus, the following rule:

BODY {background-image: url(bigyinyang.gif);
background-position: -150px -100px;}

So, with the background repeating, we can see from Figure 6-48 that the tiling pattern starts with the position specified by background-position. This first image is known as the origin image , and it's very important to understanding the next section.

Figure 6-48

Figure 6-48. Use of the background-position property sets the origin of the tiling pattern

Negative margins have an impact on vertical formatting as well,affecting how margins are collapsed. If there are negative verticalmargins, then the browser should take the absolute maximum of thenegative margins and subtract that from the maximum of any positivemargins.

In the case where there are only two margins to be collapsed, onepositive and the other negative, the situation is handled in a fairlysimple manner. The absolute value of the negative margin is