Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 24th of February 2017 01:52:59 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

B {border-top: 10px solid gray; border-bottom: 5px solid silver;}

Once more, this is allowed in the specification, but it will have absolutely no effect on the line height. However, since borders are visible, they'll be drawn -- as you can see for yourself in Figure 7-51.

Figure 7-51

Figure 7-51. Borders on inline elements

The borders have to go somewhere. This is where they went.

Again, all of this is only true for the top and bottom sides of 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.

static, and then simply shifting theelement's box (or boxes, in the case of an inline element thatcrosses multiple lines). It is possible that the positioned elementwill overlap other content. The direction and magnitude of the offsetare specified using some combination of the propertiestop, right,bottom, and left.

absolute
{line-height: 24pt;} means thatthe minimum height for each line box is 24 points. Technically, theonly way content will inherit this line height is if it is inheritedby an inline element. Most text isn't contained by an inlineelement. Thus, if we pretend that each line is contained by thefictional LINE element, then the model works outvery nicely.

As we can see in Figure 7-41, despite the fact that the border's width was set to be 20px , when the style is set to none, not only does the border's style go away, so does its width! Why?

If you'll remember, the terminology used in the previous section was that a border with a style of none does not exist. Those words were picked carefully because they help explain what's going on here. Since the border doesn't the background then. There is nothing forbidden about this behavior.

WARNING

In practice, some browsers may not do this correctly. Instead, theywill increase the height of a parent element so that the floatedelement is contained within it, even though this results in a greatdeal of extra blank space within the parent element.

Then there is the question of what happens to elements that flow past

First, in addition to the existing selector mechanisms likecontextual selectors, we have several new selector symbols that willmake it a lot easier to construct very specific, very sophisticatedselections -- without having to resort to sprinkling classes orIDs throughout the whole document.

The mostpowerful of the new selectors is the universalselector. This is specified using an asterisk(*), and it matches any element in the document.