Section 22.5. Table Display Values

22.5. Table Display Values

CSS was designed to work with all XML document languages, not just XHTML. It's likely that other languages may have the need for tabular layouts, but will not have elements like table, TD, or tr in their vocabularies.

To this end, the CSS 2.1 specification allows authors to assign table element roles to any element using the display property. The display property was discussed in Chapter 16 in relation to block and inline elements. This section covers the values listed in bold.

display

---

Values:

     inline | block | list-item | run-in | inline-block | table | inline-table  | table-row-group | table-header-group | table-footer-group  | table-row | table-column-group | table-column  | table-cell | table-caption | none | inherit 

Initial value:

     inline 

Applies to:

table and inline-table elements

Inherited:

No

Using the table-related display values , the elements from any markup language can be "mapped" to table elements. A simple example should make this clear. Consider this markup written in a hypothetical XML language.

     <platter>       <cheese>         <name>Brie</name>         <origin>France</origin>       </cheese>       <cheese>         <name>Manchego</name>         <origin>Spain</origin>       </cheese>     </platter> 

By attaching these style rules:

     platter { display: table; }     cheese { display: table-row; }     name, origin { display: table-cell; } 

The example would display in the user agent as though it were marked up like this:

      <table>       <tr>         <td>Brie</td>         <td>France</td>       </tr>       <tr>         <td>Manchego</td>         <td>Spain</td>       </td>     </table> 

The complete list of table display values is provided here. Their HTML equivalents are listed in parentheses.

table

Makes an element a block-level table element (table).

inline-table

Makes the element an inline table. Inline tables are rectangular blocks that behave as inline objects (there is no HTML equivalent).

table-row

Specifies that the element is a row of cells (tr).

table-row-group

Specifies that the element is a group of one or more rows (rowgroup).

table-header-group

Like a row group, only it is always displayed before other rows and after captions. For print, it may be repeated at the top of each page (thead).

table-footer-group

Like a row group, but it is always displayed after the other rows and before any bottom captions. It may be repeated at the bottom of each page (tfoot).

table-column

Specifies that the element is a column (col).

table-column-group

Specifies that the element is a group of columns (colgroup).

table-cell

Makes the element a table cell (td, th).

table-caption

Specifies a caption for the table (caption).

22.5.1.

22.5.1.1. Anonymous table elements

Because other languages may not have all the elements necessary to make up the table layout model used by CSS, missing elements are assumed for the layout to work. According to the CSS 2.1 specification, a table element will automatically generate necessary anonymous table objects (a table, row, or cell) around itself.

Anonymous table objects are a function of the user agent's rendering engineno code is changed. To use the earlier example and its table display values, if the row-equivalent element is missing, the browser generates an anonymous table-row object between the cells and the table level.

     <platter>     [begin anonymous table-row object]       <name>Brie</name>       <origin>France</origin>     [end anonymous table-row object]     </platter> 

For a more detailed explanation of how anonymous table elements function, see the CSS 2.1 specification online at www.w3.org/TR/CSS21/tables.html.