Template:3D Cell

Template

Description

Creates a table cell with a "3D" effect using CSS. The first four fields, if supplied, set the highlight, background, shadow, and text colors (defaults to white text on dark grey). The height= and depth= parameters, if present, set how far "out" the cell appears to protrude (i.e. sets the border width). If both are provided, only height= is used. Additional CSS can be applied using the optional css= parameter. Additional HTML attributes can be specified with the optional attr= parameter. Text alignment can be specified using the align= parameter.

This template also supports a "join" effect, allowing cells to remain formatted in discrete columns but appear as if a colspan= had been applied. Three options are available for the join= parameter: left (connect to the cell to the left), right (connect to the cell on the right) and both (connect to the cells both on the left and the right).

A {{3D Table}} template is provided for use with 3D cells, but isn't strictly necessary. A "lowered" effect (as opposed to the default "raised" effect) can be achieved by specifying the shadow color first, then the background color, and the highlight color last.

Syntax

{{3D Cell|<highlight>|<background>|<shadow>|<color>|<height=>|<depth=>|<css=>|<attr=>|<align=>|<join=>}}

Example

{{3D Table|css=border-top-width: 0;}}
| style="text-align:center;font-weight:bold" colspan="2" | Example
|-
{{3D Cell|height=2px}} A cell with some text in it.
{{3D Cell|height=2px}} A second cell.
|-
{{3D Cell|height=2px|join=right}} Two cells
{{3D Cell|height=2px|join=left}} joined together.
|}

Result

Example
A cell with some text in it.	A second cell.
Two cells	joined together.