Web Design in a Nutshell, 3rd Edition

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