Help:Table
The following shows you how to create a table.
MediaWiki syntax
To create a table, you will first need to understand the basic wikitext syntax:
{|- Signifies the start of a table.|+- Signifies the caption of a table; what text will appear above it, labeling it.!- Signifies the start of a header table cell. The text within a header cell is boldfaced and centered.!!- Signifies the switch to a new header cell within a row.|-- Signifies the start of a table row.|- Signifies the start of a regular table cell.||- Signifies the switch to a new cell within a row.|}- Signifies the end of a table.
Usage
Here is an example of how the syntax is combined to create a table:
{|
|+ This is the caption for my table.
! These !! are !! my !! table !! headers
|-
| These || are || my || regular || cells
|-
| These || are || my || regular || cells
|}
Table types
Standard table
Add class="wikitable" right after the start of the table to apply the appropriate wiki styling:
{| class="wikitable"
Some additional table classes that can be added are:
center- Centers the table in the middle of the page.sortable- Adds JavaScript sorting to the table headers.scrollable- Adds horizontal scrolling to extra-wide tables.autoresize- Automatically downscales images in cramped tables.
Multiple classes are simply separated by a space. For example:
{| class="wikitable dk sortable"
Note that class="unsortable" can be applied to header cells to remove the sorting ability for that column, and the data-sort-value attribute can be set for individual cells to change the text used for sorting.
Example
Responsive table
Responsive tables look just like standard tables on wider desktop displays, but on narrow mobile displays they transform to show each row individually, with a given label for each cell.
To create a responsive table, the first step is to add the responsive class to the table:
{| class="wikitable responsive"
And then you add the data-label to each table cell (typically the same label used in the header):
| data-label="Answer 1" | Your wish is granted.
Note that responsive tables must avoid using colspan and rowspan so that information isn't lost in mobile mode.
Example
Style changes
A table's style attribute can be used to make additional adjustments to the wikitable format. Here are two of the most basic style changes:
- Adjust the table's width
style="width:50%"
- Center all text within the table
style="text-align:center"
Multiple properties are separated by the ; character. Here's what the start of a table might look like with these properties applied:
{| class="wikitable center" style="width:50%;text-align:center"
Color customization
To customize the colors of a cell row, use a preceding row separator such as the following:
|- style="color:#fff;background:#FF2400"
To customize an individual cell, replace the leading | with syntax such as the following:
| style="background:#000" |
Example
Structure changes
The colspan and rowspan attributes can be set to a number and precede a cell definition to have the cell span that amount of columns or rows, respectively.
The colspan attribute can also be set to 100% to span all columns.