Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 14th of February 2016 09:48:10 PM

10.7. Tables

then the width of the borders is set to be the vaguely defined valuemedium ). Figure 8-10 provides ahandy illustration for remembering which parts of the box can take avalue of auto, and which cannot.

Figure 8-10

Figure 8-10. Horizontal properties that can be set to auto

width must be set to eitherauto or a non-negative value of some type. CSSalso allows browsers to set a minimum value forwidth, below which a block-level element's 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.

yielding (20px-18px = 2px ). Thus, there are only two pixels between the bottom of the list item's content and the top of the paragraph's content. This is what we see in Figure 8-24.

Figure 8-24. Collapsing margins and negative margins, in detail

There is one area of unresolved behavior, which is this: if elements overlap each other due to negative margins, which elements are "on top?" You'll note that few of the examples in this section use background colors for all elements. That's

border-styleIE4 P/Y IE5 P/Y NN4 P/P Op3 Y/-

Sets the style of the overall border of an element, using the color set by border-color or the foreground of the element itself if no border-color has been defined. CSS1 does not require recognition of any values besides none and solid. Any unrecognized value from the list of values should be reinterpreted as solid.

Example

<