Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 01st of September 2014 03:34:31 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 you're using a server-wide style sheet that floats images. Onone particular page, you don't want those images to float.Rather than writing a whole new style sheet, you could simply placeIMG {float:none;} in your document's embedded stylesheet. Beyond this type of circumstance, though, there reallyisn't much call to use float:none in your HTML documents.

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.

but percentages and lengths can be mixed together.

Not only that, but if you're using lengths or percentages, youcan give negative values, thus pushing the image out of the element,to some degree. Consider the example with the very large yin-yangsymbol for a background. At one point, we centered it, but what if weonly want part of it visible in the top left corner of the containingelement? No problem, at least in theory. First, assume the image is300 pixels tall by 300 pixels wide. Then, assume that only the bottomright third of it should be visible. We can get the desired effectparagraph and still have the result depicted in Figure 9-21.

Figure 9-21

Figure 9-21. Setting a "change bar" with absolute positioning

However, maybe we'd like to place the change marker next to whatever line was changed. In that case, we need to make only one small alteration to our styles, and we'll get the result shown in Figure 9-22:

SPAN.change {position: absolute; top: static-position; left: -5em; width: 4em;
font-weight: bold;}