CSS: The Definitive Guide, 3rd Edition (53 page)

Anonymous Table Objects

It's possible that a markup language might not
contain enough elements to fully represent tables as they are defined in CSS, or that
an author will forget to include all the necessary elements. For example, consider
this XHTML:




Name:

You might glance at this markup and assume that it defines a two-cell table of a
single row, but structurally, there is no element defining a row (because the
tris missing).

To cover such possibilities, CSS defines a mechanism for inserting "missing" table
components as anonymous objects. To illustrate how this works, let's revisit our
missing-row XHTML example. In CSS terms, what effectively happens is that an
anonymous
table-rowobject is inserted between the
tableelement and its descendant table cells:


[anonymous table-row object begins]


[anonymous table-row object ends]
Name:

A visual representation of this process is given in
Figure 11-2
.

Figure 11-2. Anonymous object generation in table formatting

Seven different kinds of anonymous-object insertions can occur in the CSS table
model. Like inheritance and specificity, these seven rules are, an example of a
mechanism that attempts to impose intuitive sense on the way CSS behaves.

Object insertion rules

If a
table-cellelement's parent is
not a
table-rowelement, then an
anonymous
table-rowobject is inserted
between the
table-cellelement and its
parent. The inserted object will include all consecutive siblings of the
table-cellelement. Consider the
following styles and markup:
```
system {display: table;}
name, moons {display: table-cell;}

Mercury
0
```
The anonymous
table-rowobject is
inserted between the cell elements and the
systemelement, and it encloses both the
nameand
moonselements.
The same rule holds true even if the parent element is a
table-row-group. To extend the example, assume
that the following applies:
```
system {display: table;}
planet {display: table-row-group;}
name, moons {display: table-cell;}


Mercury
0


Venus
0
```
In this example, both sets of cells will be enclosed in an anonymous
table-rowobject that is inserted
between them and the
planetelements.
If a
table-rowelement's parent is not
a
table,
inline-table, or
table-row-groupelement, then an anonymous
tableelement is inserted between the
table-rowelement and its parent. The inserted
object will include all consecutive siblings of the
table-rowelement. Consider the following styles and markup:
```
docbody {display: block;}
planet {display: table-row;}


Mercury
0


Venus
0
```
Because the
displayvalue of the
planetelements' parent is
block, the anonymous
tableobject is inserted between the
planetelements and the
docbodyelement. This object will enclose both
planetelements because they are consecutive
siblings.
If a
table-columnelement's parent is
not a
table,
inline-table, or
table-column-groupelement, then an anonymous
tableelement is inserted between the
table-columnelement and its parent. This is
much the same as the
table-rowrule just
discussed, except for its column-oriented nature.
If the parent element of a
table-row-group,
table-header-group,
table-footer-group,
table-column-group, or
table-captionelement is not a
tableelement, then an anonymous
tableobject is inserted between the element and its
parent.
If a child element of a
tableor
inline-tableelement is not a
table-row-group,
table-header-group,
table-footer-group,
table-row, or
table-captionelement, then an anonymous
table-rowobject is inserted between the
tableelement and its child element. This anonymous object spans all of the
consecutive siblings of the child element that are not
table-row-group,
table-header-group,
table-footer-group,
table-row, or
table-captionelements. Consider the following markup and styles:
```
system {display: table;}
planet {display: table-row;}
name, moons {display: table-cell;}


Mercury
0

Venus
0
```
Here, a single anonymous
table-rowobject will be inserted between the
systemelement and the second set of
nameand
moonselements.
The
planetelement is not enclosed by the
anonymous object because its
displayis
table-row.
If a child element of a
table-row-group,
table-header-group, or
table-footer-groupelement is not a
table-rowelement, then an anonymous
table-rowobject is inserted between the element and its child
element. This anonymous object spans all consecutive siblings of the child
element that are not
table-rowobjects
themselves. Consider the following markup and styles:
```
system {display: table;}
planet {display: table-row-group;}
name, moons {display: table-cell;}


Mercury
0

Venus
0
```
In this case, each set of
nameand
moonselements will be enclosed in an
anonymous
table-rowelement. For the
second set, the insertion takes place in accord with Rule 5. For the first
set, the anonymous object is inserted between the
planetelement and its children because the
planetelement is a
table-row-groupelement.
If a child element of a
table-rowelement is not a
table-cellelement, then
an anonymous
table-cellobject is
inserted between the element and its child element. This anonymous object
encloses all consecutive siblings of the child element that are not
table-cellelements themselves. Consider the
following markup and styles:
```
system {display: table;}
planet {display: table-row;}
name, moons {display: table-cell;}


Mercury
0
```
Because the element
numdoes not have
a table-related
displayvalue, an
anonymous
table-cellobject is inserted
between the
planetelement and the
numelement.
This behavior also extends to the encapsulation of anonymous inline
boxes. Suppose that the
numelement was
not included:
```
Mercury
0
```
The
0would still be enclosed in an
anonymous
table-cellobject. To further
illustrate this point, here is an example adapted from the CSS
specification:
```
example {display: table-cell;}
row {display: table-row;}
hi {font-weight: 900;}

This is the top row.
This is the bottom row.
```
Within each
rowelement, the text
fragments and
hielement are enclosed in
an anonymous
table-cellobject.

Table Layers

To
assemble a table's presentation, CSS defines six individual "layers" on which the
various aspects of a table are placed.
Figure
11-3
shows these layers.

Figure 11-3. The formatting layers used in table presentation

Basically, the styles for each aspect of the table are drawn on their individual
layers. Thus, if the
tableelement has a green
background and a one-pixel black border, then those styles are drawn on the lowest
layer. Any styles for the column groups are drawn on the next layer up, the columns
themselves on the layer above that, and so on. The top layer, which corresponds to
the table cells, is drawn last.

For the most part, this is simply a logical process; after all, if you declare a
background color for table cells, you would want that drawn over the background for
the
tableelement. The most important point
revealed by
Figure 11-3
is that column
styles come below row styles, so a row's background will overwrite a column's
background.

It is important to remember that, by default, all elements have transparent
backgrounds. Thus, in the following markup, the
tableelement's background will be visible "through" cells, rows, columns,
and so forth that do not have a background of their own, as illustrated in
Figure 11-4
:














hey there
what's up?
tiger lilly

Figure 11-4. Seeing the background of table-formatting layers through other layers

Other books

A Battle Lord’s Heart by A Battle Lord's Heart

Just Another Wedding by Jessica E. Subject

The Illustrated Gormenghast Trilogy by Mervyn Peake

The Maid, the Witch and the Cruel Queen by Terry Deary

Skin Deep by Gary Braver

Young Samurai: The Ring of Wind by Bradford, Chris

Saving Houdini by Michael Redhill

Trials of Artemis by London, Sue

Change of Passion (Falling for the Billionaire #1) by Karolyn James

Earth (The Invasion Trilogy Book 1) by Frances, Jessica