Help:Table: Difference between revisions
mNo edit summary |
mNo edit summary |
||
Line 220: | Line 220: | ||
=== Color customization === | === Color customization === | ||
To customize the colors of | To customize the colors of a cell row, use a preceding row separator such as the following: | ||
<pre>|- style="color:#fff;background:#FF2400"</pre> | <pre>|- style="color:#fff;background:#FF2400"</pre> |
Revision as of 09:46, July 3, 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"
Note that class="unsortable"
can be applied to header cells to remove the sorting ability for that column, and the data-sort-value
attribute can be set for individual cells to change the text used for sorting.
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" ! # ! class="unsortable" | 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 changes
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"
Color customization
To customize the colors of a cell row, use a preceding row separator such as the following:
|- style="color:#fff;background:#FF2400"
To customize an individual cell, replace the leading |
with syntax such as the following:
| style="background:#000" |
Example
Image | Name | Description |
---|---|---|
Princess Toadstool | The princess of the Mushroom Kingdom. Bowser kidnaps her to prevent her from reversing the magic the Koopa used on the Mushroom People. She appears in the final course, 8-4 where she thanks Mario for rescusing her and offers a "new quest" for him. | |
Mushroom retainers | Seven Mushroom People that are servants of the princess and prisoners of the Koopa. They appear in every castle except for the final one. Mario can rescue a retainer by finishing a castle in World 1 to World 7. They'll say, "Thank you Mario/Luigi! But our princess is in another castle!" |
Here is the source code for the above table:
{| class="wikitable" style="width:100%;text-align:center" |- style="color:#fff;background:#FF2400" ! Image ! Name ! Description |- | style="background:#000" | [[File:SMB Princess Toadstool Sprite.png]] | [[Princess Peach|Princess Toadstool]] | style="text-align:left" | The princess of the Mushroom Kingdom. Bowser kidnaps her to prevent her from reversing the magic the Koopa used on the Mushroom People. She appears in the final course, [[World 8-4 (Super Mario Bros.)|8-4]] where she thanks Mario for rescusing her and offers a "[[Super Mario Bros.#Hard mode|new quest]]" for him. |- | style="background:#000" | [[File:SMB Mushroom Retainer Sprite.png]] | [[Toad (species)|Mushroom retainers]] | style="text-align:left" | Seven Mushroom People that are servants of the princess and prisoners of the Koopa. They appear in every castle except for the final one. Mario can rescue a retainer by finishing a castle in World 1 to World 7. They'll say, "Thank you Mario/Luigi! But our princess is in another castle!" |}