Help:Specifying Colors in Tables
From QED
Contents |
Specifying Colors in Tables
The colors to be used in a table can be specified in a variety of ways. The recommended methods are:
- specifying a predefined CSS class for the table as a whole (see Example 1);
- explicitly specifying the colors using the CSS "style" parameter (see Example 2);
- using a QED template (see Example 3).
Example 1: CSS class
{| class=wikitable
| abc
| def
|}
produces
| abc | def |
The wikitable CSS class is defined in MediaWiki:Common.css.
Example 2: style parameter
{|
| style="background:red; color:white" | abc
| def
|}
produces
| abc | def |
Using Template:bgc, this table could also be specified more succintly as follows:
{|
| {{bgc|red|color:white}} | abc
| def
|}
Example 3: template
In this example, the row-header template is used. It is one of a family of table-specification templates.
{|
| {{rh|color=white|bg=red}} | abc
| def
|}
produces:
| abc | def |
Scope
Colors can be specified using the style parameter for an entire table or row, or an individual cell, it being understood that the most-specific specification overrides less specific specifications, as illustrated by the following example:
{| style="background:lightcyan; color:green"
|-
| table-wide specification || applies || here
|- style="background:red; color:white"
| row-specification
| style="background:blue; color:white" | cell-specification
| row-specification
|-
| table-wide specification || style="background:silver" | cell-specification || table-wide specification
|}
| table-wide specification | applies | here |
| row-specification | cell-specification | row-specification |
| table-wide specification | cell-specification | table-wide specification |
Columnwise Color Specifications
HTML
Browser incompatibilities greatly limit the extent to which CSS styles can be specified by column.[1] However, using HTML, the background color of a column can reliably be specified by column, it being understood that row-level and cell-level CSS specifications override column-level specifications.
For example, the following table was produced using <col style="background-color: _" />:
| Row 1 | Column 2 |
| Column 1 | Row 2 |
wikitable markup
Using wikitable markup, color specifications can be specified by table, row, or cell. It is often most convenient to do so by using one or more templates.
For example, the following is difficult to read, error-prone and difficult to maintain:
{|
|-
| style="background:gold;" | gold
| style="background:silver;" | silver
| style="background:#9C6963;" | bronze
|-
| style="background:gold;" | one
| style="background:silver;" | two
| style="background:#9C6963;" | three
|-
|}
Using the row-wise template Template:Row-bg-3, we would write:
{|
|-
| {{row-bg-3|gold|silver|{{bronze}}| gold | silver | bronze }}
|-
| {{row-bg-3|gold|silver|{{bronze}}| one | two | three }}
|}
The results for these two specifications are as follows:
| gold | silver | bronze |
| one | two | three |
| gold | silver | bronze |
| one | two | three |
Row-wise Color Specifications
To alternate row colors, one can add "zebra" to the table's list of classes, e.g. class="zebra wikitable". This has the effect of adding the "stripe" class to every second row. See Help:Zebra for further details, including how to modify the stripe color.
The foreground and background colors of each row can also be specified on the "|-" line using the CSS style parameter, e.g.
|- style="background:red;color:white"
Using the bgc template, this specification can be abbreviated to:
|- {{bgc|red|color:white}}
This template, bgc, provides another way to alternate row colors, as illustrated in the following table, which simply uses |- and |- {{bgc}} for alternating row dividers:
| Date | Speaker | Title |
|---|---|---|
| September 15 | Frédéric Passy | Universal Peace |
| September 22 | Henry Dunant | ICRC |
| October 6 | Theodore Roosevelt | The Treaty of Portsmouth |
| October 13 | Arthur Henderson | Disarmament |
| November 24 | Cordell Hull | UN |
Horizontal Row Dividers
The next table uses the following line for each horizontal orange row divider:
|- style="border-top:3px solid orange;"
| Date | Speaker | Title |
|---|---|---|
| September 15 | Frédéric Passy | Universal Peace |
| September 22 | Henry Dunant | ICRC |
| October 6 | Theodore Roosevelt | The Treaty of Portsmouth |
| October 13 | Arthur Henderson | Disarmament |
| November 24 | Cordell Hull | UN |
Most-recent specification at a given level prevails
{|
|-
| style="color:green;background:red;" | green on red || etc
|-
| style="color:green;background:red;" style="color:blue;background:khaki;"| green on red || etc
|}
produces:
| green on red | etc |
| green on red | etc |
Template:rh
Template:rh is the "row-header" template. When invoked without any arguments (that is, like this: {{rh}}), it produces:
style="background: #ececec; color: black; text-align: left; padding-left: 0.5em; font-weight: bold;" class="table-rh"
The following illustrates how such a template can be used at the table-level in conjunction with cell-level specifications:
{| {{rh}}
|-
| style="color:green;background:red;" | green on red || etc
|-
| style="color:green;background:red;" style="color:blue;background:khaki;"| green on red || etc
|}
produces:
| green on red | etc |
| green on red | etc |
