Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 07th of July 2015 03:10:26 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:

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.

BODY {color: black; background-color: white;}
P {color: #333;}
PRE, CODE, TT {color: rgb(50%,50%,50%); background-color: #FFFFCC;}
A:link {color: blue; background-color: yellow;}
A:visited {color: navy; background-color: white;}
Figure 6-20

Figure 6-20. The results of a more sophisticated style sheet

This is but the tiniest beginning of what's possible, of course. By all means, try some examples of your own!

the specified axis. The repeating of a background image begins withthe origin image, whose position is defined by the value ofbackground-position.

Example

BODY {background-repeat: no-repeat;}
border-rightIE4 P/P IE5 P/Y NN4 N/N Op3 P/-

This shorthand property defines thewidth, color, and style of the right border of an element. The usualcaveats about border-style apply.border-right-widthIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

Sets the