Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 27th of July 2016 07:14:24 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).


Figure 7-30

Figure 7-30. Two valid ways of rendering inset

So let's assume that you want to define a border style for images that are inside a hyperlink. You might make them outset, so they have a "raised button" look, as depicted in Figure 7-31:

A:link IMG {border-style: outset;}
Figure 7-31

Figure 7-31. Applying an outset border to a hyperlinked image

Again, the color of the border is based on the element's value for color, which in this circumstance is likely to


Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

1. The left (or right) outer edge of a floated element maynot be to the left (or right) of the inner edge of its parentelement.

Straightforward enough. The furthest to the left the outer left edgeof a left-floated element may go is the inner left edge of its parentelement; similarly, the furthest right a right-floated element may gois its parent's inner right edge, as shown in Figure 8-30. (In this and subsequent figures, the circlednumbers show the position where the markup element actually appears it's 36px . These may seem excessive, butthey're in keeping with the overall page design. Of course, ifyou don't want your BIG text to generate toomuch extra leading, just use these rules instead:

P {font-size: 12px; line-height: 1.5;}SMALL {font-size: 66%;}BIG {font-size: 200%; line-height: 1em;}

WARNING

Anything this useful has to have a drawback, right? As it happens,

Figure 6-25

Figure 6-25. Setting a background image for a table cell

You could even, in theory, apply images to the background of replacedelements like TEXTAREAs andSELECT lists, although user agents aren'tvery good about that sort of thing yet -- in fact, as of thiswriting, nobrowser will correctly place images in thebackgrounds of form elements.

WARNING

When an element is positioned absolutely, it is completely removedfrom the document flow. It is then positioned with respect to itscontaining block, and its edges are placed using the side-offsetproperties. The positioned element does not flow around the contentof other elements, nor does their content flow around the positionedelement. This implies that an absolutely positioned element mayoverlap other elements, or be overlapped by them. (We'll seehow you can affect the overlapping order at the end of the chapter.)

Remember that the containing block of an absolutely positioned