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.
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.
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.
Basic styling (light gray background, borders, padding and align left) can be achieved by adding class="wikitable". On Bulbapedia, class="roundy" is preferred.
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 |.
{| 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.
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.
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.
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.
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 |-):
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
|}
Note that collapsible tables will not render properly on mobile, and will instead appear as a normal table.