FANDOM


Tables are a useful addition to many kinds of pages, and are generally preferred to simple lists. Let's begin with an example comparing the two formats.

List Table

Starter Pokémon:

  • 1. Bulbasaur (Grass/Poison-type)
  • 4. Charmander (Fire-type)
  • 7. Squirtle (Water-type)
Starter Pokémon
#NameType 1Type 2
1BulbasaurGrassPoison
4CharmanderFire
7SquirtleWater


As you can see, the alignment of the table's columns makes data easier to parse, and possible to sort automatically. Try clicking the header cells to sort the table by that column.

The main downside to tables is the more difficult syntax, but that's what this tutorial is meant to help with!


Starting a table

The { } curly brace and | pipe symbols are highly important in creating a table. On the QWERTY keyboard layout, these symbols are inserted by holding
Shift
and pressing the
[
,
]
, and
\
keys, respectively.
Source code
To mark a section of wikitext as a table, add the {| table start and |} table end tags on new lines, as in the code section to the right.
{|

|}
It's recommended to give the table a default style at first, by adding either the wikitable or article-table class right after the table start. Both of these look different, as you can see below.
wikitable
Header A1Header B1Header C1
Cell A2Cell B2Cell C2
Cell A3Cell B3Cell C3
article-table
Header A1Header B1Header C1
Cell A2Cell B2Cell C2
Cell A3Cell B3Cell C3


The wikitable class makes things a bit cramped, but since it has borders around every cell, it might make this explanation easier to understand. In your articles, choose whichever one you like more.

{|class="wikitable"

|}
To add a header cell, start a new line with an ! exclamation point symbol.
{|class="wikitable"
!Name
!Description

|}
You don't want the data cells on the same row as the headers, so add a |- table row on a new line below.

If you can remember the code that separates rows, it will already be much easier to read table source code.

{|class="wikitable"
!Name
!Description
|-

|}
Now it's time to add data cells. Start a new line with a | pipe symbol for each cell.
{|class="wikitable"
!Name
!Description
|-
|Unten
|Lorem ipsum dolor…

|}
Hopefully you're comfortable enough to continue on as needed!
{|class="wikitable"
!Name
!Description
|-
|Unten
|Lorem ipsum dolor…
|-
|Zerita
|Ut enim ad minim…
|-
|Grime
|Duis aute irure dolor…
|}


That wasn't too hard, right? And those are the absolute basics of table syntax. Let's take a look at the table we just built.


NameDescription
UntenLorem ipsum dolor…
ZeritaUt enim ad minim…
GrimeDuis aute irure dolor…


It's not much so far, but it certainly gets the job done!

Advanced tables

So you've got the basics of tables down, but basic tables don't look all that striking. It's time to launch into other features and customization that you can apply to your tables to make them stand out.
To do: table caption, inline cells, sortable class, mw-collapsible class, style attribute, table background
Community content is available under CC-BY-SA unless otherwise noted.