Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 23rd of August 2017 07:22:45 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:

table
inline-table
table-column-group
table-column
table-row-group
table-row
table-cell
table-caption
table-header-group
table-footer-group 

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: to Figure 7-54 to see what happens when an inlineelement with a border is displayed across multiple lines:

B {border: 3px solid gray; background: silver;}
Figure 7-54

Figure 7-54. An inline element with a border displayed across multiple lines of text

In Figure 7-54, the left border is applied to thebeginning of the element, and the right border to the end of it.Borders are not necessarily applied in thisfashion; they can also be applied to the right and left side of eachline in the element, if the situation seems to demand it. For

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.

whether the foreground content of a previous line appears above the background of a succeeding line, or is overwritten by that background. Negative values are not permitted.

Example

padding-bottomIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This property sets the size of the bottom padding of an element, and this padding will "inherit" the element's background. Negative values are not permitted.

The meaning of these values is shown inTable 7-1.

Table 7-1. Values of the list-style property and their results

These properties can only be applied to any element that has adisplay of list-item , ofcourse, but CSS doesn't distinguish betweenordered andunorderedlist items. Thus, you might be able to set an ordered list to use