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

## 9. Rendering repeating elements as a table

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:

Prev | Up | Next
8. New values for the display property | Home | 9.1. Anonymous rows