Help:Table: Difference between revisions
m (Protected "Help:Table": Important help page. ([edit=sysop] (indefinite) [move=sysop] (indefinite))) |
mNo edit summary |
||
(25 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
The following shows you how to create a table. | The following shows you how to create a '''table'''. | ||
== | == MediaWiki syntax == | ||
To create a table, you will first need to understand | 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== | === Usage === | ||
Here is how | Here is an example of how the syntax is combined to create a table: | ||
<pre> | <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="wikitable"</pre> | |||
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 | |||
| [[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]] | |||
|} | |||
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> | <pre> | ||
{| class="wikitable responsive" | |||
! # | |||
! Question | |||
! Answer 1 | |||
! Answer 2 | |||
{| | ! Answer 3 | ||
!# | |||
! | |||
! | |||
! | |||
! | |||
|- | |- | ||
!1 | ! 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. | ||
|[[ | |||
|- | |- | ||
!2 | ! 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. | ||
| | |||
|- | |- | ||
!3 | ! 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. | ||
|[[ | |||
|- | |- | ||
!4 | ! 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> | |||
== Style tweaks == | |||
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. | |||
{{MarioWiki}} | |||
{{Shortcut|SMW:TABLE}} | |||
{{Shortcut| | [[Category:Help]] |
Revision as of 15:30, February 11, 2024
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:
{|
- Signifies the start of a table.|+
- Signifies the caption of a table; what text will appear above it, labeling it.!
- Signifies the start of a header table cell. The text within a header cell is boldfaced and centered.!!
- Signifies the switch to a new header cell within a row.|-
- Signifies the start of a table row.|
- Signifies the start of a regular table cell.||
- Signifies the switch to a new cell within a row.|}
- Signifies the end of a table.
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 |}
Table types
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.center
- Centers the table in the middle of the page.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 |
Here is the source code for the above table:
{| 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. |
Here is the source code for the above table:
{| 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 additional adjustments to the wikitable format. Here are two of the most basic style changes:
- Adjust the table's width
style="width:50%"
- Center all text within the table
style="text-align:center"
Multiple properties are separated by the ;
character. Here's what the start of a table might look like with these properties applied:
{| class="wikitable center" style="width:50%; text-align:center"
For most conventional tables like the examples in the above section, no style changes are needed.