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
|-
! &times; !! 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

Help:Tables

Basic syntax

Changing the way it looks

Colours

Width and height

Spanning rows and columns

Alignment

Sorting

Collapsible tables

Without a header row

Tables with captions

Putting it all together

Finally!