If you want to shape tables with wikitext, you have plenty of options. This one page won't go into them all, but it will show you how wikitext matches up to HTML markup, the difference a CSS class makes, and an example of a simple table that works on both desktop and mobile devices.
Basic table code[]
Wikitext is, in many ways, just shortcut for HTML. If you're familiar with HTML, you probably already know how to build a wikitext table. Here's a chart that will help you understand the connection between wikitext and HTML:
| Description | You type |
|---|---|
| Begin table (equivalent to <table>)
|
{|
|
| Table caption (equivalent to <caption>)
|
|+
|
| Begin table row (equivalent to <tr>)
|
|-
|
Table header (part of a row; equivalent to <th>)
|
! or !!
|
Table cell (part of a row; equivalent to <td>)
|
| or ||
|
| End table (equivalent to </table>)
|
|}
|
| Table prerequisites in Tabbers | {{!}}
|
Fandom's default CSS classes[]
There are several default table classes on Fandom, that style the table. To add them, simply do:
{| class="<class>"
and replace "<class>" with the classes below.
Note: All tables in mobile are automatically set to article-table, even if you set a specific table class.
Here are the default classes of Fandom:
- <no class> - Makes a grid-like layout, with no styling. (Don't use it for design!!!)
wikitable- Default MediaWiki styling of tables. Adds a simple border to all rows/columns. On table headers, it fills the background with a grey color.article-table- A modern-like table design. Adds a border to seperate rows (gutter), and colors all rows with a semi-transparent grey color. The header cells are colored grey, similar towikitablefandom-table- Similar design withwikitable, but with bigger padding. Has a sticky header, too.
Here is an example of the table classes in action:
No class[]
{|
|+ Example
|-
! Header
! Another
|-
| Foo
| Bar
|}
| Header | Another |
|---|---|
| Foo | Bar |
wikitable Class[]
{| class="wikitable"
|+ Example
|-
! Header
! Another
|-
| Foo
| Bar
|}
| Header | Another |
|---|---|
| Foo | Bar |
article-table Class[]
{| class="article-table"
|+ Example
|-
! Header
! Another
|-
| Foo
| Bar
|}
| Header | Another |
|---|---|
| Foo | Bar |
fandom-table Class[]
{| class="fandom-table"
|+ Example
|-
! Header
! Another
|-
| Foo
| Bar
|}
| Header | Another |
|---|---|
| Foo | Bar |
Basic tables[]
As explained elsewhere, tables don't always display well on mobile web.
The best approach is to keep things as simple as possible. Look at the following wikitext, and then notice, on your phone, how the table works on that smaller display:
{| class = "article-table"
!Page
!Rank 1
!Rank 2
!Rank 3
|-
|Page A
|1
|2
|3
|-
|Page B
|1
|2
|3
|-
|Page C
|2
|3
|4
|}
...which gives:
| Page | Rank 1 | Rank 2 | Rank 3 |
|---|---|---|---|
| Page A | 1 | 2 | 3 |
| Page B | 1 | 2 | 3 |
| Page C | 2 | 3 | 4 |
More advanced table coding[]
Tables can be made significantly more advanced than the example above. If you want to explore other options for wikitext tables, you could start by consulting the MediaWiki help page for tables. But remember that much of what you'll see in places like mediawiki.org or Wikipedia's help page don't really consider the effects of tables in mobile. It's important to always check your work with tables on an actual phone to see how well it displays for the many mobile readers of your wiki.
It is also possible, in some specific use cases where data needs to be calculated, to use templates or even to use Lua-based templates, both to create pre-existing table structures, or to use templates within cells.
See also[]
Further help and feedback[]
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article