Help:Tables
Tables can be a useful way of presenting information in an easily understood format. This article explains how to build a table.
Basic syntax
To start a table, put {| at the start of a line. You can put one or more colons before the opening curly brace ({) to indent the table if you wish.
To finish a table, put |} at the start of a line.
{| table |}
You can add a caption by putting |+ at the start of a line. The caption can run over several lines if you want. If you want a caption, you should place it immediately after the start of the table. Placing it elsewhere can lead to strange results.
{|
|+ Caption
table
|}
To start a new row, put |- at the start of a line.
{|
|+ Caption
|-
cells
|-
second row of cells
|}
The cells go on the next row, starting with a pipe | at the start of the line.
{|
|+ Caption
|-
| cells
|-
| second row of cells
|}
You can put several cells on the same line by separating them with ||. Alternatively, you can put each cell on a new line starting with |. Both methods produce identical output.
{|
|+ Caption
|-
| Cell A || Cell B || Cell C
|-
| Cell 1
| Cell 2
| Cell 3
|}
If you want to add column headings, use ! and !! instead of | and ||.
{|
|+ Caption
! Heading A !! Heading B !! Heading C
|-
| Cell A || Cell B || Cell C
|-
| Cell 1
| Cell 2
| Cell 3
|}
To add a row heading, use ! at the start of the line and put other cells in the row on the next line.
{|
|+ Caption
! Heading A !! Heading B !! Heading C
|-
! Row heading A
| Cell B || Cell C
|-
! Row heading 1
| Cell 2
| Cell 3
|}
You can change the format of the table by adding parameters to individual cells, rows or the entire table. For example, we might want to give our table a border.
{| border="1"
|+ Caption
! Heading A !! Heading B !! Heading C
|-
! Row heading A
| Cell B || Cell C
|-
! Row heading 1
| Cell 2
| Cell 3
|}
The code above gives us a table that looks like this:
Caption Heading A Heading B Heading C Row heading A Cell B Cell C Row heading 1 Cell 2 Cell 3
Changing the way it looks
As shown above, you can change the look of a table by placing parameters after the opening {|. In the same way, you can alter the look of a row by placing parameters after the |-.
To change the look of a single cell, place the parameters after the | at the start of the line then put the cell contents after another |, like this:
| parameters | contents
If you want to put several cells on one line, you must still separate them using ||. If you want to put a | character in a cell that does not have parameters, you must put it in <nowiki></nowiki> tags.
When using parameters, note that settings for a row override table settings while settings for an individual cell override both row and table settings.
There are a number of styles in the standard stylesheets that can be useful when producing tables, such as "wikitable". For example:
{| class="wikitable" style="text-align:center"
|+Multiplication table
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
produces:
Multiplication table × 1 2 3 1 1 2 3 2 2 4 6 3 3 6 9 4 4 8 12 5 5 10 15
Colours
You can specify colours for cells like this:
{|
| style="background:red; color:white" | abc
| def
|}
which gives:
abc def
This next example shows the way row and cell settings override table settings.
{| style="background:yellow; color:green"
|-
| abc || def || ghi
|- style="background:red; color:white"
| jkl || mno || pqr
|-
| stu || style="background:silver" | vwx || yz
|}
Gives:
abc def ghi jkl mno pqr stu vwx yz
Width and height
You can specify the width and height of the whole table. You can also specify heights for individual rows and widths for columns. To specify the width of a column, simply set the width of any cell within that column. Note that any ambiguity is resolved by the browser, so may produce different users may see different results.
The following example specifies heights for the whole table and one row and the width of one column.
{| style="width:75%; height:200px" border="1"
|-
| abc || def || ghi
|- style="height:100px"
| jkl || style="width:200px" |mno || pqr
|-
| stu || vwx || yz
|}
Which gives:
abc def ghi jkl mno pqr stu vwx yz
The following example sets the column widths. If these are not specified, the browser will determine the widths based on the contents of each column.
{| border="1" cellpadding="2"
|-
|width="100pt"|This column is 100 points wide
|width="200pt"|This column is 200 points wide
|width="300pt"|This column is 300 points wide
|-
|blah || blah || blah
|}
This gives:
This column is 100 points wide This column is 200 points wide This column is 300 points wide blah blah blah
Spanning rows and columns
Rowspan specifies that a cell spans a number of rows. Colspan specifies that a cell spans a number of columns. The following example demonstrates use of both rowspan and colspan:
{| border="1" cellpadding="5" cellspacing="0"
|-
! Column 1 || Column 2 || Column 3
|-
| rowspan="2"| A
| colspan="2" align="center"| B
|-
| C <!-- column 1 occupied by cell A -->
| D
|-
| E
| rowspan="2" colspan="2" align="center"| F
|-
| G <!-- column 2+3 occupied by cell F -->
|-
| colspan="3" align="center"| H
|}
This gives:
Column 1 Column 2 Column 3 A B C D E F G H
Alignment
Tables usually appear on the left of the page. You can change this by specifying align="center" or align="right" for the table, i.e. following the {| at the start of the table. If the table is positioned on the right, text will automatically flow around the table.
By default, text is centred vertically within each row and left aligned within each cell. To alter the vertical alignment of a row, specify valign, e.g. valign="top". You can also specify this for an individual cell. To alter the horizontal alignment, you can specify align= for the row or cell.
Sorting
You can make a table sortable by adding class="sortable" following the {| ad the start of the table. Arrows will appear in each of the column header cells. Clicking on these arrows will sort the table based on the values in the selected column in ascending order, i.e. smallest first. Clicking on the arrow again will toggle between ascending and descending order. Links and other wiki markup cannot be used in the column headers. Note that this feature uses JavaScript so may not work on some older browsers or if JavaScript is disabled.
The column can be sorted as a series of numbers, dates, currency amounts or strings. Which type of sort is used depends on the value currently in the first cell below the header. If it consists only of digits or digits plus a decimal point, the values will be treated as numbers. Note that, if the first cell contains a negative number, it will not be recognised as a number! If the first value looks like a date of the form DD-MM-YY or DD-MM-YYYY, the values will be treated as dates. If the first value starts with a $, the values will be treated as currency. A string sort will be used if the first value does not look like a number, date or currency amount. If a string sort is used, "10" comes after "1" but before "2", "3", etc. You can specify a sort key for string sorting of values by putting <span style="display:none">...<span> before the text for any cell. The value between the span tags will not be displayed but will be used for sorting.
If you are using dates in a sortable table, please note:
- The month and day must be specified as two digits, so January is 01
- Two digit years below 50 are treated as "20xx", 50 and above are treated as "19xx"
- You can use either / or - as the separator between the elements of the date
{| class="wikitable sortable"
|-
!Some strings !! Some numbers !! Some dates
|-
|Some text || 99 || 01/06/1998
|-
|More text || 5 || 24/03/1998
|-
|Yet another row || 35 || 02/09/1954
|}
gives:
Some strings Some numbers Some dates Some text 99 01/06/1998 More text 5 24/03/1998 Yet another row 35 02/05/1954
Collapsible tables
Classes can also be used to collapse tables, so they are hidden by default. Use the class mw-collapsible to enable collapsing behaviour. Collapsible tables can be sortable, too, by also including the sortable class . By default, a collapsible table begins expanded. To change this, add the additional class mw-collapsed. Alternatively, you can add autocollapse, instead of mw-collapsed, which will automatically collapse the table if two or more collapsible elements are present on the page.
Note: Previous versions of this article recommended the collapsible class, but mw-collapsible is now preferred. It is a feature of the MediaWiki software, not a local customization, and can be used to make any element collapsible, not just tables. mw-collapsible also does not require a header row in the table, as collapsible did. Tables will show the "[hide]" / "[show]" controls in the first row of the table (whether or not it is a header row), unless a table caption is present.
Example:
| Wiki source | Rendered result | |||
|---|---|---|---|---|
{| class="wikitable mw-collapsible autocollapse"
|-
! Header
|-
| Content that starts hidden
|-
| more hidden content
|}
|
|
Without a header row
| Wiki source | Rendered result | ||
|---|---|---|---|
{| class="wikitable sortable mw-collapsible"
|
|
| Wiki source | Rendered result | ||||
|---|---|---|---|---|---|
{| class="wikitable sortable mw-collapsible mw-collapsed"
|
|
Tables with captions
Tables with captions will collapse to the table caption. Use {{nowrap}} to keep the caption from being fit into a tiny vertical column when the table is collapsed.
| Wiki source | Rendered result | |||
|---|---|---|---|---|
{| class="wikitable sortable mw-collapsible"
|+{{nowrap|Somewhat long table caption}}
|
|
| Wiki source | Rendered result | |||
|---|---|---|---|---|
{| class="wikitable sortable mw-collapsible mw-collapsed"
|+{{nowrap|Somewhat long table caption}}
|
|
Putting it all together
The following example demonstrates most of the features mentioned above and includes a few more that haven't been documented here:
{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''An example table'''
|-
! style="background:#efefef;" | First header
! colspan="2" style="background:#ffdead;" | Second header
|-
| upper left
|
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
right side
|-
| style="border-bottom:3px solid grey;" | lower left
| style="border-bottom:3px solid grey;" | lower middle
|-
| colspan="3" align="center" |
{| border="0"
|+''A table in a table''
|-
| align="center" width="150px" | [[Image:Example.jpg|140px]]
| align="center" width="150px" | [[Image:Example.jpg|140px]]
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid red;
border-bottom:2px solid red; border-left:1px solid red;" |
Two sample pictures
|}
|}
This gives:
| First header | Second header | |||||
|---|---|---|---|---|---|---|
| upper left |
right side | |||||
| lower left | lower middle | |||||
| ||||||
Finally, here is an enhanced version of the multiplication table demonstrated earlier:
{| class="wikitable" style="font-style:italic; font-size:120%; border:3px dashed red;"
|+Multiplication table
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
This gives:
Multiplication table × 1 2 3 1 1 2 3 2 2 4 6 3 3 6 9 4 4 8 12 5 5 10 15
Finally!
It is not a good idea to add lots of effects to tables just because you can. It can be offputting for someone trying to read the page. In general, it is best to go for simple tables and add more complex formatting only where it is required to aid understanding.