Help:Table: Difference between revisions
from https://www.mariowiki.com/Help:Table
(→Attribution: fi) |
(from https://www.mariowiki.com/Help:Table) |
||
Line 1:
The following shows you how to create a '''table'''.
== MediaWiki syntax ==
To create a table, you will first need to understand the basic wikitext syntax:
*<code><nowiki>{|</nowiki></code> - Signifies the start of a table.
*<code><nowiki>|+</nowiki></code> - Signifies the caption of a table; what text will appear above it, labeling it.
*<code><nowiki>!</nowiki></code> - Signifies the start of a header table cell. The text within a header cell is boldfaced and centered.
*<code><nowiki>!!</nowiki></code> - Signifies the switch to a new header cell within a row.
*<code><nowiki>|-</nowiki></code> - Signifies the start of a table row.
*<code><nowiki>|</nowiki></code> - Signifies the start of a regular table cell.
*<code><nowiki>||</nowiki></code> - Signifies the switch to a new cell within a row.
*<code><nowiki>|}</nowiki></code> - Signifies the end of a table.
=== Usage ===
Here is an example of how the syntax is combined to create a table:
<pre>
{|
|+ This is the caption for my table.
! These !! are !! my !! table !! headers
|-
| These || are || my || regular || cells
|-
| These || are || my || regular || cells
|}
</pre>
== Table types ==
=== Standard table ===
Add <code>class="wikitable"</code> right after the start of the table to apply the appropriate wiki styling:
<pre>{| class="
Some additional table classes that can be added are:
*<code>dk</code> - Applies a ''[[Donkey Kong (franchise)|Donkey Kong]]'' theme to the wikitable.
*<code>center</code> - Centers the table in the middle of the page.
*<code>sortable</code> - Adds JavaScript sorting to the table headers.
*<code>scrollable</code> - Adds horizontal scrolling to extra-wide tables.
*<code>autoresize</code> - Automatically downscales images in cramped tables.
Multiple classes are simply separated by a space. For example:
<pre>{| class="wikitable dk sortable"</pre>
==== Example ====
{| 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
| 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]]
|}
Here is the source code for the above table:
<pre>
{| 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]]
|}
</pre>
=== 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 <code>responsive</code> class to the table:
<pre>{| class="wikitable responsive"</pre>
And then you add the <code>data-label</code> to each table cell (typically the same label used in the header):
<pre>| data-label="Answer 1" | Your wish is granted.</pre>
==== Example ====
{| 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.
|}
Here is the source code for the above table:
<pre>
{| 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.
|}
</pre>
A table's <code>style</code> attribute can be used to make additional adjustments to the wikitable format. Here are two of the most basic style changes:
;Adjust the table's width
:<code>style="width:50%"</code>
;Center all text within the table
:<code>style="text-align:center"</code>
Multiple properties are separated by the <code>;</code> character. Here's what the start of a table might look like with these properties applied:
<pre>{| class="wikitable center" style="width:50%; text-align:center"</pre>
For most conventional tables like the examples in the above section, no style changes are needed.
{{Nintendo Wiki}}
{{Shortcut|NW:TABLE}}
[[Category:Help]]
|