Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 04th of December 2016 04:51:26 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: line-height to be the same size as the BIG text itself. This has the same effect the images did: it opens up the entire line of text enough to clearly display the elements within it. In this case, the effect is due to the increased line-height of the inline element BIG, as opposed to the intrinsic size of an image, but the effect is largely the same.

The reasons why all of this happens are actually rather complex. For more details, please refer to the discussion of the inline formatting

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.

The example shown in Figure 6-49 is correct becausethe origin image has been placed in the center of theBODY element and then tiled along the y-axisin both directions-- in other words, both upand down. In a similar fashion, when the repeatdirection is horizontal, the background image is repeated to both theright and the left, as shown in Figure 6-50:

BODY {background-image: url(bg23.gif);

Figure 7-21

Figure 7-21. Margins on an inline element

This happens because margins on inline elements don't change the line height of an element. (In fact, the only properties that can change the distance between lines containing only text are line-height, font-size, and vertical-align.)

However, all of this is true only for the top and bottom sides of inline elements; the left and right sides are a different story

There are a number of properties relating to the layout of boxes. These are known as the "seven properties" of horizontal formatting: (from the left) margin-left, border-left, padding-left, width , padding-right, border-right, and margin-right. These are illustrated in Figure 8-9. The values of these seven properties must equal the value of width for an element's parent. neither of them starts with fig- or is simply fig. The rule would match fig-tree, however.