Basic tables can be generated in the visual editor under the "insert" dropdown, or under the "advanced" toolbar in the source editor. This will allow you to create a table with a specified number of rows and columns and apply a few other settings. However, there are more advanced options for tables that are only possible in the source editor.
Syntax
These markers must be the first characters on each line of wikitext for them to count.
{| marks the start of the table.! creates a header cell, which is bold and centered. All text after this character becomes the content of this cell.| creates a regular cell, which is aligned to the left by default. All text after this character becomes the content of this cell.|- splits all cells below it into a new row.|+ adds a caption to the table. It is optional and can be placed on any line within the table syntax. All text after these characters becomes the content of the header.|} marks the end of the table.
By default, a table will not have any background colors or borders between cells. You will need to add one or more class(es) to the table for it to have those. In almost all cases, this is done by adding class="wikitable" on the row of the table start.
There are two ways to create multiple cells in the same row. One is to have multiple lines of wikitext that each start with a single ! or |. The other is to start a line with ! or | and separate each column with !! or ||. Either way, each row needs to be separated with |-. Note that spaces between the text and the markers is ignored.
| Style 1
|
Style 2
|
Result
|
{|class="wikitable"
|+Caption
!Header 1
!Header 2
!Header 3
|-
|Data 1
|Data 2
|Data 3
|}
|
{|class="wikitable"
|+Caption
!Header 1 !! Header 2 !! Header 3
|-
|Data 1 || Data 2 || Data 3
|}
|
Caption
| Header 1
|
Header 2
|
Header 3
|
| Data 1
|
Data 2
|
Data 3
|
|
Row and column span
rowspan= and colspan= can be used to make cells span multiple rows and/or columns. After the ! or | character of the cell, place the rowspan= and/or colspan= markup with a number specifying the number of cells to span, then add a | to separate it from the content of the table.
| Wikitext
|
Result
|
{|class="wikitable"
!1×1 header
!colspan="2"|2×1 header
!rowspan="2"|1×2 header
|-
|rowspan="3"|1×3 cell
|1×1 cell
|1×1 cell
|-
|1×1 cell
|rowspan="2" colspan="2"|2×2 cell
|-
|1×1 cell
|}
|
| 1×1 header
|
2×1 header
|
1×2 header
|
| 1×3 cell
|
1×1 cell
|
1×1 cell
|
| 1×1 cell
|
2×2 cell
|
| 1×1 cell
|
|
Styling
Styling with the style= attribute allows you to change the look of the table, or specific elements of it. An example of this is style="text-align:center;width:100%", which has two rules separated by a semicolon: text-align:center centers all text, while width:100%. This styling is written in CSS, so you can look up how to write CSS rules for more options.
Styling is not possible in the visual editor or using the source editor's table generator, though you can use those to create a table first and then add your styling in the source editor after.
- The whole table
| Wikitext
|
Result
|
{|class="wikitable" style="text-align:center"
!Header 1 !! Header 2 !! Header 3
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 4
|Cell 5
|Cell 6
|}
|
| Header 1 |
Header 2 |
Header 3
|
| Cell 1 |
Cell 2 |
Cell 3
|
| Cell 4
|
Cell 5
|
Cell 6
|
|
- A whole row
| Wikitext
|
Result
|
{|class="wikitable"
!Header 1 !! Header 2 !! Header 3
|-
|Cell 1 || Cell 2 || Cell 3
|- style="text-align:center"
|Cell 4
|Cell 5
|Cell 6
|}
|
| Header 1 |
Header 2 |
Header 3
|
| Cell 1 |
Cell 2 |
Cell 3
|
| Cell 4
|
Cell 5
|
Cell 6
|
|
- A single cell
| Wikitext
|
Result
|
{|class="wikitable"
!Header 1 !! Header 2 !! Header 3
|-
|Cell 1 ||style="text-align:center"| Cell 2 || Cell 3
|-
|Cell 4
|Cell 5
|style="text-align:center"|Cell 6
|}
|
| Header 1 |
Header 2 |
Header 3
|
| Cell 1 |
Cell 2 |
Cell 3
|
| Cell 4
|
Cell 5
|
Cell 6
|
|
Centering columns
If you want to center all cells in a specific column, it can be a bit of a pain to add style="text-align:center" to every cell in that column, so this wiki has special CSS classes that you can add to the table classes to center all cells in a specific column automatically. Use center-col-X and replace X with a number for the column.
| Wikitext
|
Result
|
{|class="wikitable center-col-2"
!Header 1 !! Header 2 !! Header 3
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 4 || Cell 5 || Cell 6
|-
|Cell 7 || Cell 8 || Cell 9
|}
|
| Header 1 |
Header 2 |
Header 3
|
| Cell 1 |
Cell 2 |
Cell 3
|
| Cell 4 |
Cell 5 |
Cell 6
|
| Cell 7 |
Cell 8 |
Cell 9
|
|
Sortable tables
Adding the sortable class makes a table sortable by clicking the headers.
| Wikitext
|
Result
|
{|class="wikitable sortable"
!Value 1 !! Value 2
|-
|15 || 49.0
|-
|10 || 25.4
|-
|30 || 39.1
|}
|
| Value 1 |
Value 2
|
| 15 |
49.0
|
| 10 |
25.4
|
| 30 |
39.1
|
|
Specific columns can be made unsortable by adding the unsortable class. Again, this is only possible in the source editor.
| Wikitext
|
Result
|
{|class="wikitable sortable"
!class="unsortable"|Value 1 !! Value 2
|-
|15 || 49.0
|-
|10 || 25.4
|-
|30 || 39.1
|}
|
| Value 1 |
Value 2
|
| 15 |
49.0
|
| 10 |
25.4
|
| 30 |
39.1
|
|
Collapsible tables
Adding the mw-collapsible class makes a table collapsible by clicking the "hide" button.
| Wikitext
|
Result
|
{|class="wikitable mw-collapsible"
!Header 1 !! Header 2 !! Header 3
|-
|Data 1 || Data 2 || Data 3
|}
|
| Header 1 |
Header 2 |
Header 3
|
| Data 1 |
Data 2 |
Data 3
|
|
Adding mw-collapsed makes a table collapsed by default.
| Wikitext
|
Result
|
{|class="wikitable mw-collapsible mw-collapsed"
!Header 1 !! Header 2 !! Header 3
|-
|Data 1 || Data 2 || Data 3
|}
|
| Header 1 |
Header 2 |
Header 3
|
| Data 1 |
Data 2 |
Data 3
|
|
Navigation