Example tables (alternative syntax)

Some of the earlier examples rewritten with the `elevation' property.

Example 5bis

Example 5

table {
    border: 16px bevel;
    elevation: 5        /* the _border_ elevation */
}
td, th {
    border: 12px bevel;
    elevation: -1
}

With different depths:

Example 5 reversed

table {
    border: 16px bevel;
    elevation: -5
}
td, th {
    border: 12px bevel;
    elevation: 1
}

Example 7bis

Example 7

table { border: 5px bevel; elevation: 2 }
td { border: 4px bevel; elevation: -1 }

Example 8bis

Example 8

No vertical rules inside the table:

table { border: 5px bevel; elevation: 2 }
tr { border: 4px bevel; elevation: -2 }

Explanation: elevation 2 on the table means that all 3D borders in the table will be at elevation 2. The elevation -2 on the tr means that cells are at elevation -2 (the tr itself is not visible). There are no vertical borders around the cells (the default style is always `none').

Example 9bis

Example 9

table { border: 11px bevel; elevation: 2 }
td { border: 10px bevel; elevation: -1 }

Example 11bis

Example 11

table { border: thin dropshadow; elevation: 5pt }
td { border: thin dotted }
#G { border: thin dropshadow override; elevation: 5pt }

And the same again, but with a sunken cell:

Example 11 reversed

table { border: thin dropshadow; elevation: 5pt }
td { border: thin dotted }
#G { border: thin dropshadow override; elevation: -5pt }

Bert Bos
19 April 1996