TycheHowTo:ChangeTableColors
Once you begin working with tables you will realize how easy they are to create the basic structure. However you may want to add color to cells and rows to make certain information more visible or understandable.
| Expenditures | Actual | Budget |
|---|---|---|
| Wages | $100,026,611 | $96,808,273 |
| Retirement | $20,863,181 | $19,882,000 |
| FICA | $7,382,511 | $6,953,029 |
| Health Insurance & Other Employee Benefits | $17,681,346 | $17,338,756 |
| Retiree Health Insurance & Medicare | $12,070,370 | $14,039,610 |
Working with tables and color requires editing the table in source mode. This document will explain the basic elements of changing various stylizations.
There is extensive documentation about Tables in the Mediawiki project, including:
- Table help (ignore the comment "As a general rule, it is best to avoid using a table unless you need one.")
- Table sortability
Note that below we will use named colors, a list of which can be found here. There are also mechanisms to use RGB to describe colors which we will not get into in this article.
Tables in Source mode
Table rows have a specific style when you look at them while editing in source mode. The 8 lines below convey the data found in the first two data rows in the table. A row starts with a line "|-". Each line then contains information on a single cell, with a pipe ("|") and then the data.
|-
|Wages
|$100,026,611
|$96,808,273
|-
|Retirement
|$20,863,181
|$19,882,000
Adding background color
You can add a background color to a cell to emphasize the cell, to categorize a cell, to emphasize the good or bad nature of the data in the cell or for other reasons. A piece of wiki source code must be prepended to a cell to add color. The source code looks like this, adding in whatever color value that you want.
| style="background-color: Green;"
and then adding the source code to the data value looks like this:
| style="background-color: Green;"|$100,026,611
| Wages | $100,026,611 | $96,808,273 |
To add background stylization on an entire row, add the stylization to the table row prefix of "|-", e.g.
|-style="background-color:CornflowerBlue"
|Wages
|$100,026,611
|$96,808,273
| Expenditures | Actual | Budget |
|---|---|---|
| Wages | $100,026,611 | $96,808,273 |
| Retirement | $20,863,181 | $19,882,000 |
To make all Content rows of a table the same color, add a background style to the header line of the table. e.g.
{| class="wikitable sortable" style="background-color:Crimson;"
| Expenditures | Actual | Budget |
|---|---|---|
| Wages | $100,026,611 | $96,808,273 |
| Retirement | $20,863,181 | $19,882,000 |
| FICA | $7,382,511 | $6,953,029 |
Changing Text Color
You can change the text color for reasons similar to changing the background color - for emphasis or categorization, or to convey a mood or opinion. Text color can be changed for the full table, an individual cell or a row. A piece of wiki source code must be prepended to a cell to add text color. The source code looks like this, adding in whatever color value that you want.
style="color: Green;"
and then adding the source code to the data value looks like this:
| style="color: Green;"|$100,026,611
| Wages | $100,026,611 | $96,808,273 |
To add background stylization on an entire row, add the stylization to the table row prefix of "|-", e.g.
|-style="color: CornflowerBlue;"
|Wages
|$100,026,611
|$96,808,273
| Expenditures | Actual | Budget |
|---|---|---|
| Wages | $100,026,611 | $96,808,273 |
| Retirement | $20,863,181 | $19,882,000 |
To make all Content rows of a table the same color, add a background style to the header line of the table. e.g.
{| class="wikitable sortable" style="color: Chocolate;"
| Expenditures | Actual | Budget |
|---|---|---|
| Wages | $100,026,611 | $96,808,273 |
| Retirement | $20,863,181 | $19,882,000 |
| FICA | $7,382,511 | $6,953,029 |