Help:Tables
Tables can be a useful way of presenting information in an easily understood format. This article explains how to build a table.
Contents |
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
This wiki currently supports two forms of collapsible tables: simple collapsible tables and NavFrames.
Simple collapsible tables
Simple collapsible tables are easy to implement. However, they should be used with caution as they are not good for accessibility. To make a table collapsible, simply add the class collapsible to the table, thus:
{| class="collapsible" width="60%"
!colspan="2"| Fun with table columns
|-
| Column 1 || Column 2
|}
This gives:
Fun with table columns Column 1 Column 2
You can also add the class collapsed or autocollapse to the table. If you add collapsed, the table will always be collapsed when it is first displayed. If you add autocollapse, the table be initially collapsed if there are two or more collapsible tables on the page. For example:
{| class="collapsible autocollapse" width=60%
|-
! colspan="2" | This autocollapse table will initially collapse because there are at least two collapsible tables on this page.
|-
| Column 1 || Column 2
|}gives:
This autocollapse table will initially collapse because there are at least two collapsible tables on this page. Column 1 Column 2
NavFrames are a little more complex than simple collapsible tables. Their use is deprecated - collapsible tables are preferred. NavFrames are not actually tables, although they resemble tables. They are actually created using div elements with the classes NavFrame, NavHeader and NavContent. A simple example would look like this:
<div class="NavFrame">
<div class="NavHead">[... This is the title of your collapsible content ...]</div>
<div class="NavContent">
[... The content you want to hide goes here ...]
</div>
</div>
This gives:
[... This is the title of your collapsible content ...][... The content you want to hide goes here ...]
If you want the content to be hidden initially, add the style display:none to the NavContent div, thus:
<div class="NavFrame">
<div class="NavHead">[... This is the title of the hidden content ...]</div>
<div class="NavContent" style="display:none;">
[... This content is initially hidden ...]
</div>
</div>
This gives:
[... This is the title of the hidden content ...]
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.
