Tables are a great way to organize and display data. They can be created in the VisualEditor or by using wikitext in the source editor.

It is important to carefully consider what tables are truly meant to do and use them primarily for displaying data. For help with sortable tables, see Help:Sorting.

In the VisualEditor[]

The VisualEditor offers a simple experience of creating a table.

1. Open a page in the VisualEditor.
2. Under the insert dropdown, choose table.
3. A 4 X 4 grid will appear. Click on a cell and enter either your label or your data.
4. If you want to expand or contract the grid, click on arrows surrounding the table and you'll get a dropdown that will offer you the chance to alter the structure of your table.
5. If you want to add rows or columns click the "Insert Below" or "Insert Above" option (or "Insert After" and "Insert Before" for columns). It adds a new row or column in the next line.
6. Hit Save page when ready to publish.

In source editor[]

For advanced editors, editing tables in source mode can allow greater manipulation of table content. Wikitext is, in many ways, just a shortcut for HTML. If you're familiar with HTML, you probably already know how to build a wikitext table.

General syntax[]

Below is a chart that will help to understand the connection between wikitext and HTML:

For a practical example, the above table is produced using the following code:

{| class="article-table"
! Description !! You type !!
|-
|Begin table<br>(equivalent to <code><nowiki><table></nowiki></code> )
|<code><nowiki>{|</nowiki></code> || 
|-
|Table caption<br>(equivalent to <code><nowiki><caption></nowiki></code> )
|<code><nowiki>|+</nowiki></code> || 
|-
|Begin table row<br>(equivalent to <code><nowiki><tr></nowiki></code> )
|<code><nowiki>|</nowiki>-</code> || 
|-
|Table header<br>(part of a row; equivalent to <code><nowiki><th></nowiki></code> )
|<code>!</code><br><code>!!</code>
|<small>(used on a new line)<br>(when used on the same line)</small>
|-
|Table cell<br>(part of a row; equivalent to <code><nowiki><td></nowiki></code> )
|<code><nowiki>|</nowiki></code><br><code><nowiki>||</nowiki></code>
|<small>(used on a new line)<br>(when used on the same line)</small>
|-
|End table<br>(equivalent to <code><nowiki></table></nowiki></code> )
|<code><nowiki>|}</nowiki></code>
|
|-
|Table prerequisites in [[Help:Tabber|Tabber]]s
|<code><nowiki>{{!}}</nowiki></code>
|
|}

Adding attributes[]

Table[]

Attributes to be added to the table are noted after the table opening ( {| )

Typical attributes added here are class and style. See Examples below.

Note: The attributes cellpadding, cellspacing, border, align, width, bgcolor (and some more) are all deprecated HTML and should not be used anymore.

Cells[]

To add attributes to cells (i.e. to <td> ), the attributes are added after the initial pipe(s) ( | or || ) that create the cell, followed by another pipe that acts as the divider between attributes and content.

To add attributes to header cells ( <th> ), it's the same just with exclamation marks. The divider has to be a pipe in both cases though.

Typical attributes that are added this way are:

• class
• style
• colspan
• rowspan

Note: The attributes align, valign, width, height, bgcolor (and some more) are all deprecated HTML and should not be used anymore.

Rows[]

Attributes for rows ( <tr> tag) are added after the wikitext code that creates a new row ( |- )

Typical attributes added here are class and style.

All deprecated attributes mentioned for table and cells above are also invalid for rows.

Examples[]

Simple table:

{| class="wikitable"
! Column 1
! Column 2
! Column 3
|-
| Content 1
| Content 2
| Content 3
|}

The exact same result could also be done this way:

{| class="wikitable"
! Column 1 !! Column 2 !! Column 3
|-
| Content 1 || Content 2 || Content 3
|}

Using attributes

On the table:

{| class="wikitable sortable myClass" style="width:100%; text-align:center;"

This would create a sortable wikitable with the additional class "myClass", using the full width and with all its cells content centered.

On the cells:

{| class="wikitable" style="width:60%"
! Column 1
! colspan="2" | Column 2 + 3
|-
| rowspan="2" | Content 1
| colspan="2" | Content 2
|-
| style="background:blue; color:white;" | Content 3
| Content 4
|-
| Content 5
| style="text-align:center" | Content 6
| style="text-align:right" | Content 7
|}

The same could also be written like this:

{| class="wikitable" style="width:60%"
! Column 1 !! colspan="2" | Column 2 + 3
|-
| rowspan="2" | Content 1 || colspan="2" | Content 2
|-
| style="background:blue; color:white;" | Content 3 || Content 4
|-
| Content 5 || style="text-align:center" | Content 6 || style="text-align:right" | Content 7
|}

On a row:

{| class="wikitable"
! Column 1 !! Column 2 !! Column 3
|- style="vertical-align:top;"
| Lorem ipsum
| Dolor sit amet,<br>consetetur sadipscing
| Sed diam nonumy<br>eirmod tempor invidunt<br>ut labore et dolore magna
|}

→ More advanced wikitext is described on the Help:Tables/Wikitext page.

Best practices with tables[]

Although tables can be used for design, they shouldn't be. The results on mobile devices are awkward because tables aren't very responsive. That is, on different-sized displays, tables look different—and often are ugly. Throw pictures into tables, and the results can easily become unreadable on a phone. And if you're making whole pages or sections of articles out of tables, it'd probably be good to rethink that strategy.

Instead, as has been argued since at least 2004, tables should be about data only.

Here are some specific things to consider when using tables:

• As you increase the number of columns, you increase the chances that your table isn't going to display correctly on a mobile device. Think carefully about whether you need all those columns.
• Some games use icons liberally, meaning there's a case to be made that icons are necessary and often helpful. If you run a wiki like this, make sure all the images you use in your tables are cut to the same size, and make that size no larger than you need them to be. Anything much above 25px widths could bring problems. Additionally, make sure to use text adjacent to the icons, so those unfamiliar with what the icons mean will understand.
• It's very common for wikis to make notices on the top of pages—things like {{delete}}—using table markup. These are typically problematic on phones, and most readers on mobile devices don't care about them. You can skirt the issue by making sure they have a template type of Notice.
• Similar to the above, it is very common for wikis to make navigation boxes (Navboxes) that provide links to related articles at the end of articles using table markup. Ensure that these have the template type Navbox.
• Always check what your table looks like on a phone.

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