Read CSS: The Definitive Guide, 3rd Edition Online

Authors: Eric A. Meyer

Tags: #COMPUTERS / Web / Page Design

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

BOOK: CSS: The Definitive Guide, 3rd Edition
2.5Mb size Format: txt, pdf, ePub
ads
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
tr
is 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-row
object is inserted between the
table
element 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

  1. If a
    table-cell
    element's parent is
    not a
    table-row
    element, then an
    anonymous
    table-row
    object is inserted
    between the
    table-cell
    element and its
    parent. The inserted object will include all consecutive siblings of the
    table-cell
    element. Consider the
    following styles and markup:

    system {display: table;}
    name, moons {display: table-cell;}

    Mercury
    0

    The anonymous
    table-row
    object is
    inserted between the cell elements and the
    system
    element, and it encloses both the
    name
    and
    moons
    elements.

    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-row
    object that is inserted
    between them and the
    planet
    elements.

  2. If a
    table-row
    element's parent is not
    a
    table
    ,
    inline-table
    , or
    table-row-group
    element, then an anonymous
    table
    element is inserted between the
    table-row
    element and its parent. The inserted
    object will include all consecutive siblings of the
    table-row
    element. Consider the following styles and markup:

    docbody {display: block;}
    planet {display: table-row;}


    Mercury
    0


    Venus
    0


    Because the
    display
    value of the
    planet
    elements' parent is
    block
    , the anonymous
    table
    object is inserted between the
    planet
    elements and the
    docbody
    element. This object will enclose both
    planet
    elements because they are consecutive
    siblings.

  3. If a
    table-column
    element's parent is
    not a
    table
    ,
    inline-table
    , or
    table-column-group
    element, then an anonymous
    table
    element is inserted between the
    table-column
    element and its parent. This is
    much the same as the
    table-row
    rule just
    discussed, except for its column-oriented nature.

  4. If the parent element of a
    table-row-group
    ,
    table-header-group
    ,
    table-footer-group
    ,
    table-column-group
    , or
    table-caption
    element is not a
    table
    element, then an anonymous
    table
    object is inserted between the element and its
    parent.

  5. If a child element of a
    table
    or
    inline-table
    element is not a
    table-row-group
    ,
    table-header-group
    ,
    table-footer-group
    ,
    table-row
    , or
    table-caption
    element, then an anonymous
    table-row
    object is inserted between the
    table
    element 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-caption
    elements. 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-row
    object will be inserted between the
    system
    element and the second set of
    name
    and
    moons
    elements.
    The
    planet
    element is not enclosed by the
    anonymous object because its
    display
    is
    table-row
    .

  6. If a child element of a
    table-row-group
    ,
    table-header-group
    , or
    table-footer-group
    element is not a
    table-row
    element, then an anonymous
    table-row
    object is inserted between the element and its child
    element. This anonymous object spans all consecutive siblings of the child
    element that are not
    table-row
    objects
    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
    name
    and
    moons
    elements will be enclosed in an
    anonymous
    table-row
    element. For the
    second set, the insertion takes place in accord with Rule 5. For the first
    set, the anonymous object is inserted between the
    planet
    element and its children because the
    planet
    element is a
    table-row-group
    element.

  7. If a child element of a
    table-row
    element is not a
    table-cell
    element, then
    an anonymous
    table-cell
    object is
    inserted between the element and its child element. This anonymous object
    encloses all consecutive siblings of the child element that are not
    table-cell
    elements themselves. Consider the
    following markup and styles:

    system {display: table;}
    planet {display: table-row;}
    name, moons {display: table-cell;}


    Mercury
    0


    Because the element
    num
    does not have
    a table-related
    display
    value, an
    anonymous
    table-cell
    object is inserted
    between the
    planet
    element and the
    num
    element.

    This behavior also extends to the encapsulation of anonymous inline
    boxes. Suppose that the
    num
    element was
    not included:



    Mercury
    0


    The
    0
    would still be enclosed in an
    anonymous
    table-cell
    object. 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
    row
    element, the text
    fragments and
    hi
    element are enclosed in
    an anonymous
    table-cell
    object.

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
table
element 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
table
element. 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
table
element'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
:














heythere
what'sup?
tigerlilly

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

BOOK: CSS: The Definitive Guide, 3rd Edition
2.5Mb size Format: txt, pdf, ePub
ads

Other books

The Final Battle by Graham Sharp Paul
Opposites Attract by Cat Johnson
A New Home (Chasing Destiny) by Denver, Abigail
Beautifully Unnatural: A Young Adult Paranormal Boxed Set by Amy Miles, Susan Hatler, Veronica Blade, Ciara Knight
Filthy English by Ilsa Madden-Mills
The Storm Without by Black, Tony