Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 28th of June 2017 07:17:18 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:


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.

a drinking glass is empty, you can't really describe it asbeing half-full of nothing. You can only discuss the depth of aglass's contents if it has actual contents. In the same way,talking about the width of a border only makes sense in the contextof borders that have some existence.

This is important to bear in mind because a common mistake is toforget to declare a border style. This leads to all kinds of authorfrustration because at first glance, the styles appear correct. Theresult, though, is a paragraph with no border:

Figure 8-12

Figure 8-12. Overriding the margin-right setting


Note that margin-right is forced to beauto only for left-to-right languages such asEnglish. In right-to-left languages, everything gets flipped around,so margin-left is forced to beauto, not margin-right. This isnot so much an issue under CSS1 as it is in CSS2, which introducesproperties related to writing direction.

browsers, the "blank line" above and below each paragraphelement is generated using margins. Therefore, if you don'tdeclare margins for the P element, the browser mayapply some margins on its own -- which is to say that just becauseyou don't declare margins for an element doesn't meanthat there won't be any.

You can also declare a margin to be auto. For now,assume that auto will get you an automatically