Help:Table
The following shows you how to create a table.
Table basics
To create a table, you will first need to understand the basic wikitext syntax:
{|
- Signifies the start of a table.|}
- Signifies the end of a table.|+
- Signifies the caption of a table; what text will appear above it, labeling it.|-
- Signifies the start of a table row.|
- Signifies the start of a regular table cell.!
- Signifies the start of a header table cell. The text within a header cell is boldfaced.||
- Signifies the switch to a new cell within a row.!!
- Signifies the switch to a new header cell within a row.
Usage
Here is an example of how the syntax is combined to create a table:
{| |+ This is the caption for my table. ! These !! are !! my !! table !! headers |- | These || are || my || regular || cells |- | These || are || my || regular || cells |}
Standard table
Add class="wikitable"
right after the start of the table to apply the appropriate wiki styling:
{| class="wikitable"
Some additional table classes that can be added are:
dk
- Applies a Donkey Kong theme to the wikitable.sortable
- Adds JavaScript sorting to the table headers.scrollable
- Adds horizontal scrolling to extra-wide tables.autoresize
- Automatically downscales images in cramped tables.
Multiple classes are simply separated by a space. For example:
{| class="wikitable dk sortable"
Example
# | Preview | Event | Player's characters | In-game description | Stage |
---|---|---|---|---|---|
1 | Two Trouble Kings | Mario and Kirby | Now there are TWO greedy kings? Having a buddy doesn't change their natures. (KO Bowser and King Dedede) | Delfino Plaza | |
2 | Master the Pokémon Tag Battle | Pokémon Trainer and Pikachu | The Pokemon tournament's final challenge. Your rivals have the same Pokemon! (KO rival Pokemon Trainer, and Pikachu) | Pokémon Stadium 2 | |
3 | Fastest, Shortest, Sudden Death | Yoshi and King Dedede | Only ten seconds left?! Beat as many foes as you can in Super Sudden Death and live! (survive 10 seconds at 300% damage) | WarioWare, Inc. | |
4 | The DK Tag Calamity | Donkey Kong and Diddy Kong | DK and Diddy got tiny! Use lightning to help deal the final blow! (defeat all enemies while many Lightning Bolt items appear) | Mario Circuit |
Source code
{| class="wikitable sortable" ! # ! Preview ! Event ! Player's characters ! In-game description ! Stage |- ! 1 | [[File:Events01.png|100px]] | Two Trouble Kings | [[Mario]] and [[Kirby]] | ''Now there are TWO greedy kings? Having a buddy doesn't change their natures.'' (KO Bowser and King Dedede) | [[Delfino Plaza]] |- ! 2 | [[File:C-02.png|100px]] | Master the Pokémon Tag Battle | [[Pokémon Trainer]] and [[Pikachu]] | ''The Pokemon tournament's final challenge. Your rivals have the same Pokemon!'' (KO rival Pokemon Trainer, and Pikachu) | [[Pokémon Stadium 2]] |- ! 3 | [[File:C-03.png|100px]] | Fastest, Shortest, Sudden Death | [[Yoshi]] and [[King Dedede]] | ''Only ten seconds left?! Beat as many foes as you can in Super Sudden Death and live!'' (survive 10 seconds at 300% damage) | [[WarioWare, Inc. (stage)|WarioWare, Inc.]] |- ! 4 | [[File:C-04.png|100px]] | The DK Tag Calamity | [[Donkey Kong]] and [[Diddy Kong]] | ''DK and Diddy got tiny! Use lightning to help deal the final blow!'' (defeat all enemies while many Lightning Bolt items appear) | [[Mario Circuit]] |}
Responsive table
Responsive tables look just like standard tables on wider desktop displays, but on narrow mobile displays they transform to show each row individually, with a given label for each cell.
To create a responsive table, the first step is to add the responsive
class to the table:
{| class="wikitable responsive"
And then you add the data-label
to each table cell (typically the same label used in the header):
| data-label="Answer 1" | Your wish is granted.
Example
# | Question | Answer 1 | Answer 2 | Answer 3 |
---|---|---|---|---|
1 | What will happen if you collect seven Crystal Stars? | Your wish is granted. | The Thousand-Year Door opens. | A thousand coins appear. |
2 | What is the goal of Grodus, leader of the X-Nauts? | To conquer the world. | To get rich. | To become a superhero. |
3 | What is the legendary treasure that waits behind the Thousand-Year Door? | 100,000,000 coins. | An extremely rare badge. | A 1,000-year-old demon's soul. |
4 | What does Sir Grodus wish to do with this ancient demon's soul? | Cherish it always. | Bring the demon back to life. | Hang out with it. |
Source code
{| class="wikitable responsive" ! # ! Question ! Answer 1 ! Answer 2 ! Answer 3 |- ! data-label="#" | 1 | data-label="Question" | What will happen if you collect seven [[Crystal Stars]]? | data-label="Answer 1" | Your wish is granted. | data-label="Answer 2" | [[The Thousand-Year Door]] opens. | data-label="Answer 3" | A thousand [[coin]]s appear. |- ! data-label="#" | 2 | data-label="Question" | What is the goal of [[Sir Grodus|Grodus]], leader of the [[X-Nauts (organization)|X-Nauts]]? | data-label="Answer 1" | To conquer the world. | data-label="Answer 2" | To get rich. | data-label="Answer 3" | To become a superhero. |- ! data-label="#" | 3 | data-label="Question" | What is the legendary treasure that waits behind the Thousand-Year Door? | data-label="Answer 1" | 100,000,000 coins. | data-label="Answer 2" | An extremely rare [[badge]]. | data-label="Answer 3" | A 1,000-year-old [[Shadow Queen|demon]]'s soul. |- ! data-label="#" | 4 | data-label="Question" | What does Sir Grodus wish to do with this ancient demon's soul? | data-label="Answer 1" | Cherish it always. | data-label="Answer 2" | Bring the demon back to life. | data-label="Answer 3" | Hang out with it. |}
Style tweaks
A table's style
attribute can be used to make adjustments to the standard wikitable format. Here are some of the most common style changes:
- Adjust the table's width
style="width:50%"
- Center all text within the table
style="text-align:center"
- Align the table in the middle of the page
style="margin:1em auto"
Multiple properties are separated by the ;
character. Here's what the start of a table might look like with all these properties combined:
{| class="wikitable sortable" style="width:50%; text-align:center; margin:1em auto"