9. Rendering repeating elements as a table

9. Rendering repeating elements as a table
	Chapter 4. Other extensions

In order to style repeating elements as a table, you'll generally have one element acting as the table (element select in the example below), one or more child elements acting as table rows (element optgroup in the example below) and one or more grandchild elements acting as table cells (element option in the example below).

If you don't have child elements acting as table rows, then you need to specify extension property column-count on the element styled as a table. See Section 9.1, “Anonymous rows”.

Two properties column-span and row-span have been added to specify the column and row span of elements with a table-cell display. The value for these properties is a strictly positive integer number. The initial value is 1. These properties are not inherited.
For example, the above properties could be used to style XHTML-like tables as follows:
```
table { 
    display: table;
}

tr { 
    display: table-row;
}

td { 
    display: table-cell;
}

td[colspan] {
    column-span: concatenate(attr(colspan));
}

td[rowspan] {
    row-span: concatenate(attr(rowspan));
}
```
Notice the use of pseudo-function concatenate() to parse the value of an attribute as a number.
The low-level property start-column is generally used by style sheet extensions to specify the start column of a cell in the case of complex tables. For example, this property is used by the Java™ code that styles DocBook/CALS tables. Note that first column is column #0, not column #1. The initial value is -1, which means the normal column for the cell. This property is not inherited.

In addition to what is specified by CSS2, the :before and :after pseudo-elements allow values of the display property as follows:

If the subject of the selector is a table element, allowed values are block, marker, table-row-group and table-row. If the value of display has any other value, the pseudo-element will behave as if the value was block.
If the subject of the selector is a table-row-group element, allowed value is table-row. If the value of display has any other value, the pseudo-element will behave as if the value was table-row.
If the subject of the selector is a table-row element, allowed value is table-cell. If the value of display has any other value, the pseudo-element will behave as if the value was table-cell.

These extensions are supported to add generated column and row headers to arbitrary XML data displayed as a table.

For example, with these styles, the select, optgroup and option XHTML elements are displayed as a table with automatically generated column and row headers:

select {
    display: table;
    border: 1 solid black;
    padding: 2;
    border-spacing: 2;
    background-color: silver;
}

select:before {
    display: table-row-group;
    content: row(cell("Category", width, 20ex), cell("Choice #1"), 
                 cell("Choice #2"), cell("Choice #3"),
                 font-weight, bold, color, olive,
                 padding-top, 2, padding-right, 2, 
                 padding-bottom, 2, padding-left, 2, 
                 border-width, 1, border-style, solid);
}

optgroup {
    display: table-row;
}

optgroup:before {
    display: table-cell;
    content: attr(label);
}

option {
    display: table-cell;
    border: 1 solid black;
    padding: 2;
    background-color: white;
}

XHTML source:

<select>
  <optgroup label="Language">
    <option>Java</option>
    <option>C++</option>
    <option>Perl</option>
  </optgroup>
  <optgroup label="Editor">
    <option>Emacs</option>
    <option>Vi</option>
    <option>UltraEdit</option>
  </optgroup>
  <optgroup label="OS">
    <option>Linux</option>
    <option>Windows</option>
    <option>Solaris</option>
  </optgroup>
</select>

Rendered as:


8. New values for the display property		9.1. Anonymous rows