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:
- the whole table
- Header 1
- Header 2
- the second row
- Cell 1
- 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.
- hideable
- applied to the cell in the first row of a column, allows it to be collapsed. Optionally include the hidden class as well to make it start hidden.
Example
{| class="wikitable sortable colshideable"
! class="unsortable hideable" | Hideable column
! class="unsortable" | Boring column
! Sortable column
|-
| Cell just left of the image.
| colspan="2" rowspan="2" | A large cell for an image:
[[File:Coiled 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:
| Boring column | Sortable column | |
|---|---|---|
| Cell just left of the image. | A large cell for an image: | |
Blank cell? Not quite. In fact, far from:
| ||
| Bottom row: hard to read. | Darker cell, so this one's clearer. | Last cell. |
