Book HomeCascading Style Sheets: The Definitive GuideSearch this book Tuesday 30th of August 2016 01:25:47 AM

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.

so margin-left is forced to be auto, not margin-right. This is not so much an issue under CSS1 as it is in CSS2, which introduces properties related to writing direction.

If both margins are set explicitly, and width is auto, then the value of width will be set to be whatever is needed to reach the required total (that is, the content width of the parent element). The following

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.

WARNING

There is one drawback to this strategy. A few versions of olderbrowsers, such as very early versions of Netscape Navigator and NCSAMosaic, had some trouble with comments. The problems ranged frommangled display to browser crashes. This happened with only a veryfew browser versions, and it's safe to say that very few ofthese browsers are still being operated. Be aware that there are somepeople out there using these particular browsers, and they may wellhave major problems viewing your page if you use these comment tags.

list-style-position

If abullet's position is set tooutside, it will appear the way list items alwayshave on the Web, as you can see in Figure 7-85:

LI {list-style-position: outside;}
Figure 7-85

Figure 7-85. Placing the bullets outside list items

Figure 10-9

Figure 10-9. Hover styles

As a matter of fact, the rule for A:hover would be used while the pointer hovers over any anchor, not just a hyperlink. While some other pseudo-classes, like :link and :visited , are constrained to the A element in HTML, the same is not true of :hover. User agents could, in theory, allow the assignment of hover styles to any element, like this:

P:hover {font-weight: bold;}
line-heights 1.5 time their font-size... and that includes <BIG>this big element right here</BIG>. By using a scaling factor, line-heights scale to match the font-size of any element.</P>
Figure 8-64

Figure 8-64. Using a scaling factor for line-height

In this example, the line-height for the SMALL element turns out to be 12px , and for the BIG element, it's 36px . These may seem excessive, but they're in keeping with the overall page design. Of course, if you don't want your BIG text to generate tooof help. For example, you might want to set all H1 elements to have a thick, gray, solid border, but only along the bottom. There are two ways to accomplish this:

H1 {border-bottom: thick solid gray;}

This will apply the values to the bottom border alone, as shown in Figure 7-45, leaving the others to their defaults. Since the default border style is none, no borders appear on the other three sides of the element.