Welcome to Bulbapedia, the free Pokémon encyclopedia that anyone can edit. Create your account and get started with editing pages!
In commemoration of Nintendo’s 135ᵗʰ anniversary, September 20 to 30 is NIWA Cross-Wiki Week. Click here for event details and the possibility to win a $20/€20 Nintendo eShop gift card.
Check the Bulbagarden home page for up-to-date Pokémon news and discuss it on the forums or in the Bulbagarden Discord server.

Help:Tables

From Bulbapedia, the community-driven Pokémon encyclopedia.
Jump to navigationJump to search
Shortcut
H:TABLE

Tables can be created on Bulbapedia pages in Source Editor using special wikicode syntax, and many different styles and tricks can be used to customise them.

For a guide on how tables work in the VisualEditor, see Help:VisualEditor § Editing tables.

Wiki table markup summary

Markup Description 
{|
 Table start (required) 
|+
 Table caption; only between table start and table row (optional) 
|-
 Table row (optional on first row - wiki engine assumes the first row) 
!
 Table header cell (optional)
Consecutive table header cells may be added on same line separated by double marks !! or start on new lines, each with its own single mark ! 
|
 Table data cell (optional)
Consecutive table data cells may be added on same line separated by double marks || or start on new lines, each with its own single mark | 
|}
 Table end (required)
  • The above marks must start on a new line, except the double marks (|| and !!) for optionally adding consecutive cells to a single line.
  • Blank spaces at the beginning of a line are ignored.
  • Content may either follow its cell mark on the same line (after any optional HTML attributes); or on lines below the cell mark (beware of undesired paragraphs though). Content that uses wiki markup that itself needs to start on a new line, such as with lists, headings, or nested tables, must be on its own new line.
  • To insert a pipe character (|) into a table caption or cell, use the <nowiki>|</nowiki> escaping markup or {{!}}.

HTML attributes

Each mark, except table end (|}), optionally accepts one or more HTML attributes. Attributes must be on the same line as the mark.

  • Cells and captions (| or ||, ! or !!, and |+) hold content—separate any attribute from its content with a single pipe (|), with attributes preceding content.
  • Table and row marks ({| and |-) do not directly hold content. Do not add a pipe (|) after any attributes.

Commonly included attributes in tables include: class, for example class="roundy"; style, for CSS styling; scope, to indicate row or column header cells; rowspan, to extend cells by more than one row; colspan, to extend cells by more than one column.

Basics

The following table lacks borders and good spacing but shows the simplest wiki markup table structure.

Markup Result 
{|
| Kanto
| Johto
|-
| Bulbasaur
| Charmander
|-
| Squirtle
| Pikachu
|}
Kanto Johto
Bulbasaur Charmander
Poké Ball Ultra Ball

The cells in the same row can be listed on one line separated by || (two pipe symbols). If the text in the cell should contain a line break, use ‎<br /> instead.

Markup Result 
{|
| Kanto|| Johto || more
|-
| Bulbasaur || Charmander || more
|-
| Poké Ball || Ultra<br />Ball || and<br />more
|}
Kanto Johto more
Bulbasaur Charmander more
Poké Ball Ultra
Ball		 and
more

Extra spaces within cells in the wiki markup, as in the wiki markup below, do not affect the actual table rendering.

Markup Result 
{|
|    Kanto|| Johto || more
|-
|      Bulbasaur || Charmander || more
|-
|      Poké Ball || Ultra<br />Ball || and<br />more
|}
Kanto Johto more
Bulbasaur Charmander more
Poké Ball Ultra
Ball		 and
more

You can have longer text or more complex wiki syntax inside table cells, too:

Markup Result 
{|
|Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, 
sed diam voluptua. 

At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet. 
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}
Lorem ipsum dolor sit amet,

consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet
  • consetetur sadipscing elitr
  • sed diam nonumy eirmod tempor invidunt

Table headers

Table headers can be created by using ! (exclamation mark) instead of | (pipe symbol). Headers usually show up bold and centered by default.

Markup Result 
{|
! style="text-align:left;" | Pokémon
! HP
! Attack
|-
| Bulbasaur
| 45
| 49
|-
| Ivysaur
| 60
| 62
|-
| Venusaur
| 80
| 82
|-
! Mega Venusaur
| 80
| 100
|}
Pokémon HP Attack
Bulbasaur 45 49
Ivysaur 60 62
Venusaur 80 82
Mega Venusaur 80 100

When using attributes as in the heading "Pokémon" a vertical bar | is used for separation. Not an exclamation character !.

Caption

A table caption can be added to the top of any table as follows.

Markup Result 
{|
|+ First partner Pokémon
|-
| Bulbasaur
| Charmander
|-
| Squirtle
| Pikachu
|-
| Chikorita
| Cyndaquil
|}
First partner Pokémon
Bulbasaur Charmander
Squirtle Pikachu
Chikorita Cyndaquil

class="wikitable"

Basic styling (light gray background, borders, padding and align left) can be achieved by adding class="wikitable". On Bulbapedia, class="roundy" is preferred.

Markup Result 
{| class="wikitable"
|+ First partner Pokémon
|-
| Bulbasaur
| Charmander
|-
| Squirtle
| Pikachu
|-
| Chikorita
| Cyndaquil
|}
First partner Pokémon
Bulbasaur Charmander
Squirtle Pikachu
Chikorita Cyndaquil

HTML colspan and rowspan

You can use HTML colspan and rowspan attributes on cells for advanced layout.

Markup Result 
{| class="wikitable"
! colspan="6" | Stats
|-
| rowspan="2" | Bulbausaur
| HP
| Attack
| Defense
| colspan="2" | Sp. Atk & Def
|-
| 45
| colspan="2" | 49
| 65
| 65
|}
Stats
Bulbausaur HP Attack Defense Sp. Atk & Def
45 49 65 65

HTML attributes

You can add HTML attributes to tables.

Attributes on tables

Placing attributes after the table start tag ({|) applies attributes to the entire table.

Markup Result 
{| class="wikitable" style="text-align: center; color: green;"
| Bulbasaur
| Charmander
| 10
|-
| Squirtle
| Pikachu
| 100
|-
| Chikorita
| Cyndaquil
| 1000
|}
Bulbasaur Charmander 10
Squirtle Pikachu 100
Chikorita Cyndaquil 1000

Attributes on cells

You can put attributes on individual cells. For example, numbers may look better aligned right.

Markup Result 
{| class="wikitable"
| Bulbasaur
| Charmander
| style="text-align: right;" | 10
|-
| Squirtle
| Pikachu
| style="text-align: right;" | 100
|-
| Chikorita
| Cyndaquil
| style="text-align: right;" | 1000
|}
Bulbasaur Charmander 10
Squirtle Pikachu 100
Chikorita Cyndaquil 1000

You can also use cell attributes when you are listing multiple cells on a single line. Note that the cells are separated by ||, and within each cell the attribute(s) and value are separated by |.

Markup Result 
{| class="wikitable"
| Bulbasaur || Charmander || style="text-align: right;" | 10
|-
| Squirtle || Pikachu || style="text-align: right;" | 100
|-
| Chikorita || Cyndaquil || style="text-align: right;" | 1000
|}
Bulbasaur Charmander 10
Squirtle Pikachu 100
Chikorita Cyndaquil 1000

Attributes on rows

You can put attributes on individual rows, too.

Markup Result 
{| class="wikitable"
| Bulbasaur
| Charmander
| style="text-align: right;" | 10
|-
| Squirtle
| Pikachu
| style="text-align: right;" | 100
|- style="font-style: italic; color: green;"
| Chikorita
| Cyndaquil
| style="text-align: right;" | 1000
|}
Bulbasaur Charmander 10
Squirtle Pikachu 100
Chikorita Cyndaquil 1000

Attributes on caption and headers

Attributes can be added to the caption and headers.

Markup Result 
{| class="wikitable"
|+ style="caption-side: bottom; color: #4682B4;" | ''First partner Pokémon''
|-
! style="color: green" | Kanto
! style="color: orange" | Johto
|-
| Bulbasaur
| Chikorita
|-
| Charmander
| Cyndaquil
|- 
| Squirtle
| Totodile
|-
| Pikachu 
|
|}
First partner Pokémon
Kanto Johto
Bulbasaur Chikorita
Charmander Cyndaquil
Squirtle Totodile
Pikachu

Border width

If border-width: has only one number, it is for all four border sides:

Markup Result 
{| style="border-style: solid; border-width: 20px"
| Hello World
|}
Hello World

If border-width: has more than one number, the four numbers are for top, right, bottom, left (Remember clockwise order ↑→↓←):

Markup Result 
{| style="border-style: solid; border-width: 10px 20px 100px 0"
| Hello World
|}
Hello World

Another method to define the widths of the four sides of a cell is to use border-left, border-right, border-top and border-bottom:

Markup Result 
{| style="border-left: solid 10px black; border-right: solid 20px black; border-top: solid 30px black; border-bottom: solid 40px black;" 
| Hello World
|}
Hello World

Padding

Markup Result 
{| class=wikitable 
| style="padding: 10px" | Example of <code>style="padding: 10px"</code>
|-
| style="padding: 50px" | Example of <code>style="padding: 50px"</code> 
Specify the padding on '''EACH CELL'''
|-
| style="padding:100px" | Example of <code>style="padding: 100px"</code>
|}
Example of style="padding: 10px"
Example of style="padding: 50px"

Specify the padding on EACH CELL

Example of style="padding: 100px"

Column width

Markup 
{| class="wikitable" style="width: 85%;"
| colspan="2" | This column width is 85% of the area width
|-
| style="width: 30%"| '''This column is 30% counted from 85% of the area width'''
| style="width: 70%"| '''This column is 70% counted from 85% of the area width'''
|}
Result
This column width is 85% of the area width
This column is 30% counted from 85% of the area width This column is 70% counted from 85% of the area width


Alignment

Table alignment

Table alignment is achieved by using CSS. The table alignment is controlled by margins. A fixed margin on one side will make the table aligned to that side, if on the opposite side the margin is defined as auto. To have a table center aligned, you should set both margins to auto.

For example, a right-aligned table:

Markup Result 
{| class="wikitable" style="margin-left: auto; margin-right: 0px;"
| Bulbasaur
| Charmander
|-
| Squirtle
| Pikachu
|-
| Chikorita
| Cyndaquil
|}
Bulbasaur Charmander
Squirtle Pikachu
Chikorita Cyndaquil

And a center-aligned table:

Markup Result 
{| class="wikitable" style="margin: auto;"
| Bulbasaur
| Charmander
|-
| Squirtle
| Pikachu
|-
| Chikorita
| Cyndaquil
|}
Bulbasaur Charmander
Squirtle Pikachu
Chikorita Cyndaquil

Table floating around text

If you align a table to the right or the left side of the page, the text that comes after the table starts at the end of it, leaving an empty space around the table. You can make the text wrap around the table by making the table to float around the text instead of just aligning it. This can be achieved using the float CSS attribute, which can specify where the table floats to the right side or to the left. When using float, margins doesn't control table alignment and can be used to specify the margin between the table and the surrounding text.

Markup Result 
{| class="wikitable" style="float: right; margin-left: 10px;"
| Bulbasaur
| Charmander
|-
| Squirtle
| Pikachu
|-
| Chikorita
| Cyndaquil
|}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Bulbasaur Charmander
Squirtle Pikachu
Chikorita Cyndaquil

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Cell contents alignment

The alignment of cell contents can be controlled with 2 different CSS properties: text-align and vertical-align. text-align can be specified at the table, row or individual cells, while vertical-align only can be specified at individual rows or cells.

Markup Result 
{| class="wikitable"
|- style="vertical-align: top;"
| style="height: 100px; width: 100px; text-align: left;" | A
| style="height: 100px; width: 100px; text-align: center;" | B
| style="height: 100px; width: 100px; text-align: right;" | C
|- style="vertical-align: middle;"
| style="height: 100px; width: 100px; text-align: left;" | D
| style="height: 100px; width: 100px; text-align: center;" | E
| style="height: 100px; width: 100px; text-align: right;" | F
|- style="vertical-align: bottom;"
| style="height: 100px; width: 100px; text-align: left;" | G
| style="height: 100px; width: 100px; text-align: center;" | H
| style="height: 100px; width: 100px; text-align: right;" | I
|}
A B C
D E F
G H I

Classes

There are several other CSS classes, besides the basic class=wikitable, that can be used in tables.

Collapsible tables

Shortcut
H:COLLAPSE

Classes can be used to collapse tables, so they are hidden by default. Use the class mw-collapsible to enable collapsing behaviour. By default, a collapsible table begins expanded. To change this, add the additional class mw-collapsed.

With a header row:

Markup Result 
{| class="wikitable mw-collapsible mw-collapsed"
! Kanto
! Johto
! Hoenn 
|-
| Bulbasaur
| Chikorita
| Treecko
|-
| Charmander
| Cyndaquil
| Torchic
|- 
| Squirtle
| Totodile
| Mudkip
|}
Kanto Johto Hoenn
Bulbasaur Chikorita Treecko
Charmander Cyndaquil Torchic
Squirtle Totodile Mudkip

Without a header row:

Markup Result 
{| class="wikitable mw-collapsible"
|-
| Bulbasaur
| Chikorita
| Treecko 
|-
| Charmander
| Cyndaquil
| Torchic
|- 
| Squirtle
| Totodile
| Mudkip
|}
Bulbasaur Chikorita Treecko
Charmander Cyndaquil Torchic
Squirtle Totodile Mudkip 
{| class="wikitable mw-collapsible mw-collapsed"
|-
| Bulbasaur
| Chikorita
| Treecko 
|-
| Charmander
| Cyndaquil
| Torchic
|- 
| Squirtle
| Totodile
| Mudkip
|}
Bulbasaur Chikorita Treecko
Charmander Cyndaquil Torchic
Squirtle Totodile Mudkip

Tables with captions will collapse to the table caption. The header will not be visible when collapsed. Use <span style="white-space: nowrap;">...</span> to keep the caption from being fit into a tiny vertical column when the table is collapsed.

Markup Result 
{| class="wikitable mw-collapsible mw-collapsed"
|+ <span style="white-space: nowrap;">First partner Pokémon</span>
|-
! Kanto
! Johto
! Hoenn 
|-
| Bulbasaur
| Chikorita
| Treecko
|-
| Charmander
| Cyndaquil
| Torchic
|- 
| Squirtle
| Totodile
| Mudkip
|}
First partner Pokémon
Kanto Johto Hoenn
Bulbasaur Chikorita Treecko
Charmander Cyndaquil Torchic
Squirtle Totodile Mudkip

OOjs UI icon lightbulb-yellow.png Note that collapsible tables will not render properly on mobile, and will instead appear as a normal table.

Sortable tables

Shortcut
H:SORT

Tables can be made sortable by adding class=sortable.

Markup Result 
{| class="wikitable sortable"
! Pokémon
! HP
! Attack
|-
| Bulbasaur
| 45
| 49
|-
| Ivysaur
| 60
| 62
|-
| Venusaur
| 80
| 82
|-
| Mega Venusaur
| 80
| 100
|}
Pokémon HP Attack
Bulbasaur 45 49
Ivysaur 60 62
Venusaur 80 82
Mega Venusaur 80 100

If you want a specific column not to be sortable, specify class="unsortable" in the attributes of its header cell.

Markup Result 
{| class="wikitable sortable"
! class="unsortable" | Pokémon
! HP
! Attack
|-
| Bulbasaur
| 45
| 49
|-
| Ivysaur
| 60
| 62
|-
| Venusaur
| 80
| 82
|-
| Mega Venusaur
| 80
| 100
|}
Pokémon HP Attack
Bulbasaur 45 49
Ivysaur 60 62
Venusaur 80 82
Mega Venusaur 80 100

Sometimes it is helpful to exclude the last row of a table from the sorting process. This can be achieved using class="sortbottom" on the desired table row (line starting with |-):

Markup Result 
{| class="wikitable sortable"
! Pokémon
! HP
! Attack
|-
| Bulbasaur
| 45
| 49
|-
| Ivysaur
| 60
| 62
|-
| Venusaur
| 80
| 82
|-
| Mega Venusaur
| 80
| 100
|- class="sortbottom"
| Total
| 265
| 293
|}
Pokémon HP Attack
Bulbasaur 45 49
Ivysaur 60 62
Venusaur 80 82
Mega Venusaur 80 100
Total 265 293

Sortable tables can also be made collapsable:

Markup Result 
{| class="wikitable sortable mw-collapsible mw-collapsed"
! Pokémon
! HP
! Attack
|-
| Bulbasaur
| 45
| 49
|-
| Ivysaur
| 60
| 62
|-
| Venusaur
| 80
| 82
|-
| Mega Venusaur
| 80
| 100
|}
Pokémon HP Attack
Bulbasaur 45 49
Ivysaur 60 62
Venusaur 80 82
Mega Venusaur 80 100

OOjs UI icon lightbulb-yellow.png Note that sortable tables will not render properly on mobile, and will instead appear as a normal table.

Roundy tables

Shortcut
H:ROUNDY

Bulbapedia has an in-house style for tables, which is best achieved using class="roundy", rather than class="wikitable".

A basic roundy table looks like this:

Markup Result 
{| class="roundy" style="background: red; padding: 2px;"
! Kanto
! Johto
! Hoenn
|- style="background: #FFF;"
| Bulbasaur
| Chikorita
| Treecko
|- style="background: #FFF;"
| Charmander
| Cyndaquil
| Torchic
|- style="background: #FFF;"
| Squirtle
| Totodile
| Mudkip
|}
Kanto Johto Hoenn
Bulbasaur Chikorita Treecko
Charmander Cyndaquil Torchic
Squirtle Totodile Mudkip

Note that the corners of the bottom row of cells cut into the border of the table.

This can be fixed by adding {{roundybl}} and {{roundybr}} to the style= parameter of the affected cells:

Markup Result 
{| class="roundy" style="background: red; padding: 2px;"
! Kanto
! Johto
! Hoenn
|- style="background: #FFF;"
| Bulbasaur
| Chikorita
| Treecko
|- style="background: #FFF;"
| Charmander
| Cyndaquil
| Torchic
|- style="background: #FFF;"
| style="{{roundybl|6px}};" | Squirtle
| Totodile
| style="{{roundybr|6px}};" | Mudkip
|}
Kanto Johto Hoenn
Bulbasaur Chikorita Treecko
Charmander Cyndaquil Torchic
Squirtle Totodile Mudkip

It is also possible to change the radius of the table's corners by adding {{roundy}}:

Markup Result 
{| class="roundy" style="background: red; padding: 2px; {{roundy|20px}};"
! Kanto
! Johto
! Hoenn
|- style="background: #FFF;"
| Bulbasaur
| Chikorita
| Treecko
|- style="background: #FFF;"
| Charmander
| Cyndaquil
| Torchic
|- style="background: #FFF;"
| style="{{roundybl|16px}};" | Squirtle
| Totodile
| style="{{roundybr|16px}};" | Mudkip
|}
Kanto Johto Hoenn
Bulbasaur Chikorita Treecko
Charmander Cyndaquil Torchic
Squirtle Totodile Mudkip

Roundy tables can also be made sortable and collapsable:

Markup Result 
{| class="roundy sortable mw-collapsible mw-collapsed" style="background: red; padding: 2px;"
! Kanto
! Johto
! Hoenn
|- style="background: #FFF;"
| Bulbasaur
| Chikorita
| Treecko
|- style="background: #FFF;"
| Charmander
| Cyndaquil
| Torchic
|- style="background: #FFF;"
| style="{{roundybl|6px}};" | Squirtle
| Totodile
| style="{{roundybr|6px}};" | Mudkip
|}
Kanto Johto Hoenn
Bulbasaur Chikorita Treecko
Charmander Cyndaquil Torchic
Squirtle Totodile Mudkip

Colors

When adding colors to a table, it is often best to use one of Bulbapedia's predefined colors, rather than a color name or hex code (the exceptions being black #000 or white #FFF).

This is done by using a color template:

Markup Result 
{| class="roundy" style="background: #{{white color dark}}; padding: 2px;"
! Kanto
! Johto
! Hoenn
|- style="background: #FFF;"
| Bulbasaur
| Chikorita
| Treecko
|- style="background: #FFF;"
| Charmander
| Cyndaquil
| Torchic
|- style="background: #FFF;"
| style="{{roundybl|6px}};" | Squirtle
| Totodile
| style="{{roundybr|6px}};" | Mudkip
|}
Kanto Johto Hoenn
Bulbasaur Chikorita Treecko
Charmander Cyndaquil Torchic
Squirtle Totodile Mudkip

Always remember to include the # before a color template.

It is also important that any text is easy to read by ensuring there is enough contrast:

Markup Result 
{| class="roundy" style="background: #{{white color light}}; padding: 2px;"
! Kanto
! Johto
! Hoenn
|- style="background: #{{black color dark}}; color: #FFF;"
| Bulbasaur
| Chikorita
| Treecko
|- style="background: #{{black color dark}}; color: #FFF;"
| Charmander
| Cyndaquil
| Torchic
|- style="background: #{{black color dark}}; color: #FFF;"
| style="{{roundybl|6px}};" | Squirtle
| Totodile
| style="{{roundybr|6px}};" | Mudkip
|}
Kanto Johto Hoenn
Bulbasaur Chikorita Treecko
Charmander Cyndaquil Torchic
Squirtle Totodile Mudkip

See also

Retrieved from "https://bulbapedia.bulbagarden.net/w/index.php?title=Help:Tables&oldid=4103165"