Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 31st of May 2016 06:03:15 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:

7.3.7. Margins and Inline Elements

So far, we've only talked about how margins apply to block-level elements like paragraphs and headers. Margins can also be applied to inline elements, although the effects are a little different.

Let's say that you want to set top and bottom margins on

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.

look at an example HTML document and break it down by pieces. Here's the markup, shown in Figure 1-1:

Figure 1-1

Figure 1-1. A simple document

Now, let's examine each portion of the document.

1.4.1. The LINK Tag

<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css" TITLE="Default">

First we consider the use of the LINK tag. The LINK tag is ait's more than enough, another area of expansion is inpseudo-class and pseudo-element selectors.