Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 19th of January 2018 12:54:50 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:

Therefore, the following markup would be displayed as shown in Figure 8-64 (backgrounds added for illustrative purposes):

P {font-size: 12px; line-height: 1.5;}SMALL {font-size: 66%;}BIG {font-size: 200%;}<P>This paragraph has a line-height of 1.5 times its font-size. In addition,any elements within it <SMALL>such as this small element</SMALL> also haveline-heights 1.5 time their font-size... and that includes <BIG>this bigelement right here</BIG>. By using a scaling factor, line-heights scaleto match the font-size of any element.</P>
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.

cell. In addition, there is a fourth table cell between the sidebar and the main part of the page, in order to create some blank space. There are also a lot of FONT tags and a few tables imbedded within the main table that determines the page's layout. The skeleton of the page is expressed as a table, with a border and cell padding added to make the structure more clear:

This has the appearance shown in Figure 11-2. Obviously, there is a lot more in the cells than what's listed above. The actual content was replaced by labels for the sake of to the layout of boxes. These are known as the"sevenproperties" of horizontal formatting: (from the left)margin-left, border-left,padding-left, width ,padding-right, border-right,and margin-right. These are illustrated in Figure 8-9. The values of these seven properties mustequal the value of width for an element'sparent.

UA specific



Applies to

all elements

displayIE4 P/P IE5 P/Y NN4 P/P Op3 P/-

Used to classify elements into broad categories. The most popular value is probably none, which suppresses the display of an element altogether. Gratuitous use of display with

7.5.1. Percentage Values and Padding

As stated earlier, it's possible to set percentage values for the padding of an element. Percentages are computed in relation to the width of the parent element, so they can change if the parent element's width changes in some way. For example, assume the following, which is illustrated in Figure 7-59:

P {padding: 10%; background-color: silver;}
<DIV STYLE="width: 200px;">
<P>This paragraph is contained within a DIV which has a width of 200 pixels,