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 need to 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), otherwise it will not work. Note that this limitation is in deviation with the CSS standard which requires the user agent to automatically generate anonymous tables, rows and cells when needed to.

- 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.

- 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 | 10. Making a table look like a spreadsheet