HELP CONTENTS · Getting Started · New to WoWWiki · Editing WoWWiki · Editing WoWWiki (advanced)
The WoWWiki Community · Additional Help · Mists-Logo-Small Updating for Mists of Pandaria
See Wikia Help for general Wikia- and wiki- related help. See Metawiki logo 18x18 Meta-Wiki HelpIntro for basic MediaWiki usage!

MediaWiki supports different types of table syntax:

  1. Limited HTML syntax
  2. Pipe syntax (which this article covers)

See the Wikipedia article on HTML elements for notes on traditional HTML. Note, however, that the thead, tbody, tfoot, and colgroup elements are currently not supported in MediaWiki.[1]

The pipe syntax substitutes pipes (|) for HTML. The pipes must start at the beginning of a new line, except when separating optional parameters from content or when using || to separate cells on a single line.

Example table Edit

! Header 1
! Header 2
! Header 3
| row 1, cell 1
| R1/C2
| Cell 3
| row 2, cell 1 || R2/C2 || Cell 3

Would look like this:

Header 1 Header 2 Header 3
row 1, cell 1 R1/C2 Cell 3
row 2, cell 1 R2/C2 Cell 3


Use {| to open a table, and |} closes a table. Parameters (such as align, style, etc.) can be assigned added after the opening brackets.

Please use {| class="darktable" in WoWwiki tables to make them all purty-like:

Header 1 Header 2 Header 3
row 1, cell 1 R1/C2 Cell 3
row 2, cell 1 R2/C2 Cell 3

Note how each column automatically adjusts to the width of its widest cell.


Captions are the name of the table, centered just above it, and are created by adding a line with |+ (plus desired parameters) just after the table-opening line. |+ Put Caption Here produces:

Put Caption Here
Header 1 Header 2 Header 3
row 1, cell 1 R1/C2 Cell 3
row 2, cell 1 R2/C2 Cell 3


Rows are created with |-. Rows do not get closed; either start a new row or end the table.

Parameters added here will affect all cells in the row. |- align="right" for the 2nd row produces:

Header 1 Header 2 Header 3
row 1, cell 1 R1/C2 Cell 3
row 2, cell 1 R2/C2 Cell 3


Cells can be entered in two formats. On separate lines, as in row 1 of our example table; or all on one line, as in row 2.

Parameters only affect their cell, and can be used in both formats:




Like rows, cells are not closed; simply start a new row or close the table.

Cell Parameters (note that cell parameters will override any conflicting row parameters):

  • style: values can be "background-color:<color>", where <color> is a word, such as gray or red.
  • width: values can be "<x>px" where <x> is the number of pixels.
  • rowspan and colspan: values can be "<x>" where <x> is the number of columns or rows to span. Most commonly used in headers, this allows a cell to span multiple rows or columns, starting in the current row or column.
  • bgcolor: values can be "#<rr><gg><bb>", where the variables are values 00 thru FF, hexadecimal values for the red (<rr>), green (<gg>), and blue (<bb>) values of the desired color.


!style="background-color:gray;" width="300px"|Header 1!!bgcolor="#FF0000" colspan="2"|Header 2


Headers are simply the top-most cells in a column, or the left-most cells in a row. They describe the contents of that column or row. They use ! instead of the | used for regular cells, but parameters still use "|".

Like normal cells, headers can be listed on separate lines (as in our example table), or all on one line:

!Header 1!!Header 2!!Header 3


Columns on a table are made sortable by adding a class at the table opening: {| class="sortable"

Example Sortable Table
Alphabetical Numerical Reputation Surname
A 4 2 Revered Kir James T Kirk
C 3 3 Honored Rod Gene Roddenberry
B 2 4 FriendlyAnd John Anderson
D 1 1 Exalted Aze Bill Azeroth

Vic The Reputation column uses hidden, non-displaying numbers to determine sort order:

<span style="display:none">#</span>

Non-displaying letters can also be used to sort a list by surname if desired. For long lists, you should include at least the first few letters for sub-sorting names that start with the same letter.

<span style="display:none">Aze</span> Bill Azeroth

Striped tablesEdit

In long tables, or in tables with multi-line rows, it may be desirable to visually distinguish rows. This is accomplished by making every other row use a different background with class="zebra" at the start:

{| class="darktable zebra"

This also works for sortable tables. The zebra tag ensures that the rows have alternating colors, even when the order of the rows is changed by sorting.

Example Striped Table
Alphabetical Numerical Reputation Surname
A 4 2 Revered Kirk
(James T.)
C 3 3 Honored Roddenberry
B 2 4 Friendly Anderson
D 1 1 Exalted Azeroth

You can also manually control the striping by using class="alt" at the beginning of the desired rows:


Rows with this tag will have the alternative color. This method is only advisable for non-sortable tables.

References Edit

External linksEdit


Tables are a great way to organize and display data. They can be created in the VisualEditor, by using wikitext, and in the classic editor's visual mode.

It is important to carefully consider what tables are truly meant to do and use them primarily for displaying data.

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.
    Adding table in VisualEditor

    4x4 appears after inserting 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 alter the structure of your table.

    Hit the arrows to make a change

  5. Hit Save page when ready to publish.

In source mode

For advanced editors, editing tables in source mode can allow greater manipulation of table content. This is described in the Help:Tables/Wikitext page.

In the classic editor's visual mode

To create a table using the classic editor's visual mode, click on the table button on the right rail. Table button

Edit toolbar table highlighted

Click the table button

  1. In edit mode, click on the table button under the Insert section of the editing toolbar.
  2. A pop-up box will appear, allowing you to choose the parameters you want for your table.
    Table properties

    Create your table

  3. Once you click OK, a table will appear in your text. You can now input content.
  4. Should you need to change the table parameters, simply right click, and make the needed changes.
    Table editor

    Right click to edit

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

Community content is available under CC-BY-SA unless otherwise noted.