9.2. Styling tables

The "Simple Section" document type has a rather simple table element. A table contains an optional tableHeader row, followed by one or more tableRow rows. A tableHeader or tableRow element contains one or more tableCell cells. A tableCell may span several columns, which is specified using attribute columns.

The table element is styled using standard CSS rules, expect for the number of columns spanned by a cell. Excerpts from rng_section_config/section.css (same file for all variants):

table {
    display: table;
    border: 1px solid gray;
    margin-top: 1.33ex;
    margin-bottom: 1.33ex;
}

tableHeader,
tableRow {
    display: table-row;
}

tableCell {
    display: table-cell;
    border: 1px solid gray;
    padding: 0.5ex;
}

...

tableCell[columns] {
    column-span: concatenate(attr(columns));
}

Extension property column-span in XMLmind XML Editor - Support of Cascading Style Sheets (W3C CSS) may be used to specify the number of columns spanned by an element having display: table-cell. Similarly, extension property row-span in XMLmind XML Editor - Support of Cascading Style Sheets (W3C CSS) may be used to specify the number of rows spanned by an element having display: table-cell.

The value of property column-span (and row-span) is a positive integer. In the case of a tableCell, this value is obtained by parsing the value of attribute columns as a number. Expression concatenate(attr(columns)) does exactly this:

  1. Standard CSS pseudo-function attr() is used to return the value of attribute columns.

  2. Extension pseudo-function concatenate() in XMLmind XML Editor - Support of Cascading Style Sheets (W3C CSS) concatenates all its string arguments, then parses the result of the concatenation and finally returns the parsed CSS property value.