This page includes very basic information about how to build a chart.
Basic chart
| Type
|
Title
|
Subject
|
| A |
B |
Trees
|
| C |
D |
Plants
|
The code for that chart can be typed like this:
{|class="wikitable"
|-
! Type
! Title
! Subject
|-
| A || B || Trees
|-
| C || D || Plants
|}
...or like this:
{|class="wikitable"
! Type
! Title
! Subject
|-
| A
| B
| Trees
|-
| C
| D
| Plants
|}
The advantage of using the second method is that it tends to be easier on the eye. The disadvantage of using the second method is that if you have a chart with a lot of rows in it, you or the next person to edit the page will have to do much more scrolling to get to the line that needs editing.
Width of chart
You can determine the width of the chart:
| Type
|
Title
|
Subject
|
| A
|
B
|
Trees
|
| C
|
D
|
Plants
|
| Type
|
Title
|
Subject
|
| A
|
B
|
Trees
|
| C
|
D
|
Plants
|
| Type
|
Title
|
Subject
|
| A
|
B
|
Trees
|
| C
|
D
|
Plants
|
To set the width of the chart, you insert code in the "class" line that expresses a percent. The number you insert is your preference for how much of the page you want the chart to take up.
Add color
Dark background
| Type
|
Title
|
Subject
|
| A
|
B
|
Trees
|
| C
|
D
|
Plants
|
The code that creates the above chart looks like this:
{|class="wikitable"
! style="background-color:#00008B; color: white;" | Type
! style="background-color:#00008B; color: white;" | Title
! style="background-color:#00008B; color: white;" | Subject
|-valign="top"
| A
| B
| Trees
|-valign="top"
| C
| D
| Plants
|}
Light background
| Type
|
Title
|
Subject
|
| A
|
B
|
Trees
|
| C
|
D
|
Plants
|
The code that creates the above chart looks like this:
{|class="wikitable"
! style="background-color:#7FFFD4" | Type
! style="background-color:#7FFFD4" | Title
! style="background-color:#7FFFD4" | Subject
|-valign="top"
| A
| B
| Trees
|-valign="top"
| C
| D
| Plants
|}
To a row
| Type
|
Title
|
Subject
|
| A
|
B
|
Trees
|
| C
|
D
|
Plants
|
The code that creates the above chart looks like this:
{|class="wikitable"
! Type
! Title
! Subject
|- style="background-color:#A4C639"
| A
| B
| Trees
|- style="background-color:#00FFFF"
| C
| D
| Plants
|}
To a cell
| Type
|
Title
|
Subject
|
| A
|
B
|
Trees
|
| C
|
D
|
Plants
|
The code that creates the above chart looks like this:
{|class="wikitable"
! Type
! Title
! Subject
|-
| style="background-color:#A4C639" | A
| style="background-color:#FAEBD7" | B
| style="background-color:#FFA812" | Trees
|-valign="top"
| style="background-color:#918151" | C
| style="background-color:#00FFFF" | D
| style="background-color:#B2EC5D" | Plants
|}
Color codes
To find the codes for different colors, check out this list of colors and their codes from Wikipedia.
Complex charts
Columns that span multiple rows
You may wish to have one or more of your column headings span more than one row. Here are some examples that you can customize for the effect you want.
| State
|
2010
|
|
2009
|
| Not on ballot
|
On ballot
|
Not on ballot
|
On ballot
|
| Abandoned
|
Judicial invalidation
|
Resignation
|
Recalled
|
Retained
|
Abandoned
|
Judicial invalidation
|
Resignation
|
Recalled
|
Retained
|
| Alaska |
|
|
1 |
|
1 |
|
|
|
|
|
|
| 2010 school bond question election overview
|
| Status
|
Number
|
Dollars
|
District %
|
Dollar %
|
 a Approved
|
61
|
$5,053,250,000
|
73.5%
|
89.75%
|
 d Defeated
|
22
|
$576,950,000
|
26.5%
|
10.25%
|
| Totals: |
83 |
$5,630,200,000 |
100% |
100%
|
Rows that span multiple columns
Here's an example that you can customize for your purposes:
Facebook
Twitter
YouTube
