Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 24th of April 2014 08:28:48 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.

some web servers, the file extension .css ismapped to the MIME typex-application/css, or "Continuous SlideShow," instead of the MIME type text/css.Even older servers may not have any mapping for.css, and so will serve up the files astext/plain.

TIP

When it comes right down to it, the extension isn't actually

The drawback to using a number value is that IE3 will interpretit as a number of pixels. See Chapter 8, "Visual Formatting" for adetailed discussion of line-height and line boxes.

Example

P {line-height: 18pt;}H2 {line-height: 200%;}
list-styleIE4 P/P IE5 Y/Y NN4 P/P Op3 Y/-

A shorthand property condensing allother list-style properties. It applies to allelements with a display value of list-item ; in