Help:Tables

Tables are used for tabulating data, and are defined with a specific syntax in MediaWiki.

Syntax

The following example of an unstyled table:

{|
|-
! Header 1 !! Header 2
! Header 3
|-
| Cell 1
| Cell 2 || Cell 3
|}

produces:

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3

Tables start with {| and end with |}. Rows are separated with |- on its own line, and each row consists of a number of cells. The first of these can be omitted.

Each cell can be a header ( in HTML) or normal table cell (). A new cell can be started with ! for a header or | otherwise, and its contents follows this character. To start another cell on the same line, use two cell separators (!! or ||). A row can contain any number of cells, each of which can contain anything, even another table.

Attributes

Tables like this are quite hard to follow, so we need to style them. A number of attributes can be placed in various parts of the table code to affect different parts of it. Here is a simple table with these locations marked out:

{| (1)
! (2) | Header 1 !! (3) | Header 2
|- (4)
| (5) | Cell 1 || (6) | Cell 2
|}

Attributes in these places affect:

1. the whole table
2. Header 1
3. Header 2
4. the second row
5. Cell 1
6. Cell 2

The format these attributes take is the same as the attributes of HTML tags: something along the lines of class="sortable" colspan="2" rowspan="3". Here are some of the possibilites:

class

these are labels given to the table, each separated by a space, that external stylesheets and scripts can use to alter the appearance and behaviour of the table. These are described in more detail in the 'classes' section below.

colspan

a number indicating how many columns the cell should take up. When the cell takes up more space, the cells that would have been in that space are moved along into the next column.

rowspan

like colspan, defining the number of rows the cell should use. Again, other cells are moved into columns to the right.

style

this contains what are called "inline CSS styles", which can be used to adjust the appearance of the affected parts of the table. For more information on CSS, the tutorials at HTMLDog are a good place to start.

Other attributes exist and are documented elsewhere, but it is better practice to use CSS in the style attribute to achieve the same effects.

Classes

Classes are used for two reasons: to alter the table's behaviour or its appearance.

wikitable

applied to the whole table, this is a generic grey style, and the easiest way to make a readable table. An alias is prettytable.

sortable

makes the rows sortable by any column. Give a cell in the first row of the table the unsortable class to exclude its column from being used in sorting. Note that this sorts text strings, not numbers, so a cell containing "10" comes before one containing "9"; to fix this, precede the "9" with a hidden 0:

<span style="display: none;">0</span>9

collapsible

adds a '[show]'/'[hide]' button; add collapsed to have the table start collapsed. This works best for tables with one column.

colshideable

allows columns to be collapsed (all content removed). To enable this for a column, give the cell in the first row of that column the hideable class, and optionally hidden to make it start hidden.

Example

{| class="wikitable sortable colshideable"
! class="hideable" | Header1 !! Header2 !! Header3
|-
| Cell just left of the image.
| colspan="2" rowspan="2" | A large cell for an image:
[[File:-132Coiled Launcher.png]]
|-
| Blank cell?  Not quite.  In fact, far from:
*bullets
*and all of that
*nonsense
|- style="color: #ddd;"
| Bottom row: hard to read. || style="background: #555;" | Darker cell, so this one's clearer.  || Last cell.
|}

produces:

Hideable column	Boring column	Sortable column
Cell just left of the image.	A large cell for an image:
Blank cell? Not quite. In fact, far from: bullets and all of that nonsense
Bottom row: hard to read.	Darker cell, so this one's clearer.	Last cell.