Tables may be set up in wiki pages using either HTML table elements, or wikicode. HTML table elements will not be discussed here (see web pages if you're interested). The benefit of wikicode is that the table is made of character symbols. This makes it easier to imagine the table when you work in the editing box.
As a general rule, it is best to avoid using a table unless you need one. Table markup often complicates page editing.
Wiki table markup summary
Wiki table markup, or wiki markup or just marks are words used to describe to control codes. Control codes are symbols used that tell wikipedia how to display something. When a person looks at a page in wikipedia, the wiki markup can make the text look special, such as bold, large, or in a table. The person viewing the page does not see the wiki markup. Only the editor (the person that writes the page) sees the wiki markup.
Wiki Table Markup
{|
|
table start, required.
|
|+
|
table caption, optional.
- If entered, it should be between table start and the first table row. Only one table caption should be entered. The text will normally be displayed above the table, and it will be centered.
|
!
|
table header cell, optional. Normally entered before data rows.
- The text entered in the table header will appear in a bold display, and will be centered.
- If entering one table header per line, start each with a single mark (!).
- If entering more than one table header per line, start the line with a single mark (!), and separated each table header with a double mark (!!).
|
|-
|
table row, required between rows (including any table header row).
- Not needed before the first row.
|
|
|
table data cell, required.
- The text entered in the table data will line-up on the left side.
- If entering one table data per line, start each with a single mark (|).
- If entering more than one table data per line, start the line with a single mark (|), and separated each table data with a double mark (||).
|
|}
|
table end, required.
|
- The above marks must start on a new line except the double || and !!
- Double || and !! marks are used to add more than one cell entry in a line.
- XHTML attributes, Each mark, except table end, optionally accepts one or more XHTML attributes.
- XHTML attributes must be on the same line as the mark.
- Separate XHTML attributes from each other with a single space.
- Cells (| or ||, and ! or !!) and the caption (|+) hold content. Separate attributes from content with a single pipe (|).
- Cell content may follow on same line or on following lines.
- Table and row marks ({| and |-) do not hold content. Do not add pipe (|) after their optional attributes. The pipe mark will be deleted.
- If there is no space between the last attribute and the pipe mark, the last attribute will be deleted!
- Content may be entered on the same line as its cell mark, or on the lines below the cell mark.
- Centent must follow any optional XHTML attributes.
- Content that uses wiki markup, such as lists, headers, or nested tables, that needs to start on a new line must be on its own new line.
Simple wiki table
This is a plain wiki table. It shows the simplest wiki table markup table structure.
The table does not have any borders. There is very little spacing between the content.
In the following examples, the table on the left is the table the user will see when they view an article in wikipedia. The box on the right is the wiki markup code entered to create the table.
One cell per line
This is the simplest wiki table markup table structure. The content of each cell is entered one its own line.
| Orange
|
Apple
|
Banana
| | Bread
|
Pie
|
Cake
| | Butter
|
Ice cream
|
Milk
|
|
{|
|Orange
|Apple
|Banana
|-
|Bread
|Pie
|Cake
|-
|Butter
|Ice cream
|Milk
|}
|
One row per line
To make the wiki markup look more like a table, row content may be entered on one line. This works well for small tables, like this example. Note that the content cells are separated by a double pipe mark (||).
Extra spaces in the cells in the wiki markup can be added. The wiki markup below has extra spaces to make the wiki markup look more like a table. The extra spaces do not affect the table display.
| Orange |
Apple |
Banana
| | Bread |
Pie |
Cake
| | Butter |
Ice cream |
Milk
|
|
{|
| Orange || Apple || Banana
|-
| Bread || Pie || Cake
|-
| Butter || Ice cream || Milk
|}
|
Table with XHTML attributes
You can add XHTML attributes tables. Attributes are control codes that define how the table and its data will display.
Attributes on tables
Placing attributes after the table start tag applies attributes to the entire table.
- For example, a table may look better with a border around the entire table.
| Orange
|
Apple
|
12,333.00
| | Bread
|
Pie
|
500.00
| | Butter
|
Ice cream
|
1.00
|
|
{| border="1"
|Orange
|Apple
|12,333.00
|-
|Bread
|Pie
|500.00
|-
|Butter
|Ice cream
|1.00
|}
|
Attributes on cells
Attributes can be placed on individual cells.
- For example, one cell can be made highlighted (made to stand out) by changing its background color.
- Note that the attribute must be separated from the cell data with a pipe mark (|).
| Orange
|
Apple
|
Banana
| | Bread
|
Pie
|
Cake
| | Butter
|
Ice cream
|
Milk
|
|
{| border="1"
|Orange
|Apple
|Banana
|-
|Bread
|Pie
|bgcolor="cyan"|Cake
|-
|Butter
|Ice cream
|Milk
|}
|
Attributes on rows
Attributes may be placed on individual rows,.
- For example, one row may be highlighted by changing the color and style of the font (the format used to display letters).
| Orange
|
Apple
|
Banana
| | Bread
|
Pie
|
Cake
| | Butter
|
Ice cream
|
Milk
|
|
{| border="1"
|Orange
|Apple
|Banana
|-
|Bread
|Pie
|Cake
|- style="font-style:italic;color:red;"
|Butter
|Ice cream
|Milk
|}
|
For the authoriative source on these, see the W3C's HTML 4.01 Specification page on tables.
Table with CSS styles
CSS style attributes may be used to define how the table and its data will display.
- Just like XHTML attributes, CSS style attributes may be added to the table, row, or cell.
- CSS style attributes can be added with or without other HTML attributes.
| Orange
|
Apple
| | Bread
|
Pie
| | Butter
|
Ice cream
|
|
{| style="color:green;background-color:yellow;"
cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
Tables using the wikitable class
One CSS attribute is class. A class named wikitable had been made to display tables in a common format.
- To use this format, add class="wikitable" to the table start tag.
- Most wiki edit windows (were the article data is entered) have a table button. This button will insert a wiki table with the class="wikitable" attribute.
| Orange |
Apple |
Banana
| | Bread |
Pie |
Cake
| | Butter |
Ice cream |
Milk
|
|
{| class="wikitable"
| Orange || Apple || Banana
|-
| Bread || Pie || Cake
|-
| Butter || Ice cream || Milk
|}
|
Special wiki table elements
Table headings
Table headings are created by using "!" instead of "|". Headings are usually displayed bold and centered.
- Headings may be placed in any table row.
- Headings are normally used at the beginning of a table.
- XHTML or CSS attributes and header text must be separated with the "|" character.
| Item |
Amount |
Cost
|
|---|
| Apples |
6 pieces |
7.85
| | Bananas |
5 pieces |
4.92
| | Mandarins |
8 pieces |
8.55
| | Ice cream |
2 pints |
4.85
| | Total: |
26.17
|
|---|
|
{| border="1" cellspacing="0"
! Item !! Amount !! Cost
|-
| Apples || 6 pieces || align="right" | 7.85
|-
| Bananas || 5 pieces || align="right" | 4.92
|-
| Mandarins || 8 pieces || align="right" | 8.55
|-
| Ice cream || 2 pints || align="right" | 4.85
|-
! colspan="2" | Total: !! align="right" | 26.17
|}
|
Table headings with class "wikitable"
| Item |
Amount |
Cost
|
|---|
| Apples |
6 pieces |
7.85
| | Bananas |
5 pieces |
4.92
| | Mandarins |
8 pieces |
8.55
| | Ice cream |
2 pints |
4.85
| | Total: |
26.17
|
|---|
|
{| class="wikitable"
! Item !! Amount !! Cost
|-
| Apples || 6 pieces || align="right" | 7.85
|-
| Bananas || 5 pieces || align="right" | 4.92
|-
| Mandarins || 8 pieces || align="right" | 8.55
|-
| Ice cream || 2 pints || align="right" | 4.85
|-
! colspan="2" | Total: !! align="right" | 26.17
|}
|
Table caption
Table captions are created by using "|+" instead of "|". Captions are usually displayed centered.
- Captions are displayed outside of the table.
- Captions are normally displayed above the table.
- Captions may be placed in any table row.
- Captions are normally used at the beginning of a table.
- XHTML or CSS attributes and caption text must be separated with the "|" character.
Food complements
| Orange
|
Apple
| | Bread
|
Pie
| | Butter
|
Ice cream
| |
{| border="1" cellspacing="0"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
Table caption with class "wikitable"
Food complements
| Orange
|
Apple
| | Bread
|
Pie
| | Butter
|
Ice cream
| |
{| class="wikitable"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
Table caption with attributes
XHTML or CSS attributes may be used to change the display of the caption.
Food complements
| Orange
|
Apple
| | Bread
|
Pie
| | Butter
|
Ice cream
| |
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:red" | Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|
Caveats
Negative numbers
Starting a cell on a new line with a negative number may cause an error. The minus sign next to the "|" mark will look like the wiki markup for a new row (|-). To avoid this error, always put a space before a negative number.
- A parameter that evaluates to a negative number will cause the same error.
Incorrect
| Temperature in winter
| | Temperature in summer
|
90 degrees
| |
{| border="1" cellspacing="0" cellpadding="10"
|+Incorrect
|-
|Temperature in winter
|-10 degrees
|-
|Temperature in summer
|90 degrees
|}
|
Correct
| Temperature in winter
|
-10 degrees
| | Temperature in summer
|
90 degrees
| |
{| border="1" cellspacing="0" cellpadding="10"
|+ Correct
|-
| Temperature in winter
| -10 degrees
|-
| Temperature in summer
| 90 degrees
|}
|
CSS vs attributes
Table borders defined with CSS rather than the border attribute will display wrong in a small number of text browsers.