Help:Tables: Difference between revisions

From Pikipedia, the Pikmin wiki
Jump to navigation Jump to search
m (→‎Example: removed -132)
(Added shortcuts.)
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
Tables are used for tabulating data, and are defined with a specific syntax in MediaWiki.
{{shortcut|P:TABLE}}
This page explains how to create a table in an article. Tables use fairly complicated syntax in MediaWiki, but there are simple rules you can follow to make an effective and good-looking table.


==Syntax==
==The basics==
The following example of an unstyled table:
To start a table, place the code <code>{|class="wikitable"</code> on a new line. The <code>{|</code> defines a table, and the <code>class="wikitable"</code> styles it in the standard table style. To mark the end of a table, place <code>|}</code> at the bottom.
<pre>{|
 
Regular cells in the table start with the <code>|</code> (vertical bar) character. To add a cell, just start a line with this character and add the text you want to appear after it. Adding no extra text will make the cell empty. Cells will go from left to right in the order you add them.
 
To start a new row of the table, place <code>|-</code> on its own line.
 
Here is an example of these basic table features.
{|class="wikitable"
!Wiki code
!Result
|-
|-
! Header 1 !! Header 2
|<pre>{|class="wikitable"
! Header 3
|Cell 1
|Cell 2
|Cell 3
|-
|-
| Cell 1
|Cell 4
| Cell 2 || Cell 3
|Cell 5
|Cell 6
|}</pre>
|}</pre>
|
{|class="wikitable"
|Cell 1
|Cell 2
|Cell 3
|-
|Cell 4
|Cell 5
|Cell 6
|}
|}


produces:
Often, you want to make a cell a header cell. Header cells have a green background and bold text, and are commonly used on the top row and sometimes the left column of a table. To do this, replace the <code>|</code> with a <code>!</code>.
{|
{|class="wikitable"
!Wiki code
!Result
|-
|<pre>{|class="wikitable"
!
!Column 1
!Column 2
|-
!Row 1
|
|
|-
!Row 2
|
|
|}</pre>
|
{|class="wikitable"
!
!Column 1
!Column 2
|-
|-
! Header 1 !! Header 2
!Row 1
! Header 3
|
|
|-
|-
| Cell 1
!Row 2
| Cell 2 || Cell 3
|
|
|}
|}
|}


Tables start with <code>{|</code> and end with <code>|}</code>.  Rows are separated with <code>|-</code> on its own line, and each row consists of a number of cells.  The first of these can be omitted.
To save space, instead of having each cell on its own line, you can use the vertical bar (or exclamation mark) character twice to start a new cell. This can make the wiki code harder to read, so only do this when there's a good reason to.
 
{|class="wikitable"
Each cell can be a header (<code><th></code> in HTML) or normal table cell (<code><td></code>).  A new cell can be started with <code>!</code> for a header or <code>|</code> otherwise, and its contents follows this character. To start another cell on the same line, use two cell separators (<code>!!</code> or <code>||</code>).  A row can contain any number of cells, each of which can contain anything, even another table.
!Wiki code
 
!Result
==Attributes==
|-
Tables like this are quite hard to follow, so we need to style them.  A number of ''attributes'' can be placed in various parts of the table code to affect different parts of it.  Here is a simple table with these locations marked out:
|<pre>{|class="wikitable"
<pre>{| (1)
!Pikmin type !! Resistant to !! Attack power !! Throw height
! (2) | Header 1 !! (3) | Header 2
|-
|- (4)
|[[Red Pikmin]] || Fire || 15 || Normal
| (5) | Cell 1 || (6) | Cell 2
|-
|[[Yellow Pikmin]] || Electricity || 10 || High
|-
|[[Blue Pikmin]] || Water || 10 || Normal
|}</pre>
|}</pre>
|
{|class="wikitable"
!Pikmin type !! Resistant to !! Attack power !! Throw height
|-
|Red Pikmin || Fire || 15 || Normal
|-
|Yellow Pikmin || Electricity || 10 || High
|-
|Blue Pikmin || Water || 10 || Normal
|}
|}


Attributes in these places affect:
Make sure that every row and column has the same number of cells. If you add an extra column to one row, make sure to do that for all rows, or weird empty spaces will appear in the table. Similarly, if you add a new row, make sure it has a cell for every column.
#the whole table
#Header 1
#Header 2
#the second row
#Cell 1
#Cell 2


The format these attributes take is the same as the attributes of HTML tags: something along the lines of <code>class="sortable" colspan="2" rowspan="3"</code>.  Here are some of the possibilites:
==More advanced features==
;class:these are labels given to the table, each separated by a space, that external stylesheets and scripts can use to alter the appearance and behaviour of the table.  These are described in more detail in the 'classes' section below.
Additional properties can be added to cells, rows, and entire tables to change their appearance or functionality.
;colspan:a number indicating how many columns the cell should take up.  When the cell takes up more space, the cells that would have been in that space are moved along into the next column.
;rowspan:like colspan, defining the number of rows the cell should use.  Again, other cells are moved into columns to the right.
;style:this contains what are called "inline CSS styles", which can be used to adjust the appearance of the affected parts of the table.  For more information on CSS, the tutorials at [http://www.htmldog.com/guides/ HTMLDog] are a good place to start.


Other attributes exist and are documented elsewhere, but it is better practice to use CSS in the ''style'' attribute to achieve the same effects.
Let's start with the <code>{|class="wikitable"</code> at the start. More words can be added after <code>wikitable</code> to add more attributes to the table. Adding the text <code>sortable</code> allows each column to be sorted, which can be very useful, and additional attributes and options for each attribute are available. Here is an example of a sortable table.
{|class="wikitable"
!Wiki code
!Result
|-
|<pre>{|class="wikitable sortable"
!Ship part
!Weight
|-
|Main Engine
|20
|-
|Eternal Fuel Dynamo
|40
|-
|Gravity Jumper
|25
|-
|Geiger Counter
|15
|-
|Gluon Drive
|50
|-
|Zirconium Rotor
|30
|}</pre>
|
{|class="wikitable sortable"
!Ship part
!Weight
|-
|Main Engine
|20
|-
|Eternal Fuel Dynamo
|40
|-
|Gravity Jumper
|25
|-
|Geiger Counter
|15
|-
|Gluon Drive
|50
|-
|Zirconium Rotor
|30
|}
|}


===Classes===
It's also possible to add attributes to cells, by placing the property text after the vertical bar or exclamation mark, and then placing another vertical bar before the actual cell content. The most useful attributes are <code>colspan</code> and <code>rowspan</code>, which allow a cell to take up multiple columns or rows. The <code>style</code> attribute can be used to change a cell's appearance with CSS. A demonstration of how to use these attributes is below.
Classes are used for two reasons: to alter the table's behaviour or its appearance. 
{|class="wikitable"
 
!Wiki code
;wikitable: applied to the whole table, this is a generic grey style, and the easiest way to make a readable table.  An alias is ''prettytable''.
!Result
;sortable: makes the rows sortable by any column.  Give a cell in the first row of the table the ''unsortable'' class to exclude its column from being used in sorting.  Note that this sorts text strings, not numbers, so a cell containing "10" comes before one containing "9"; to fix this, precede the "9" with a hidden 0:
|-
:''<nowiki><span style="display: none;">0</span>9</nowiki>''
|<pre>{|class="wikitable"
;collapsible: adds a '[show]'/'[hide]' button; add ''collapsed'' to have the table start collapsed.  This works best for tables with one column.
!
;hideable: applied to the cell in the first row of a column, allows it to be collapsed. Optionally include the ''hidden'' class as well to make it start hidden.
!Column 1
 
!Column 2
==Example==
!Column 3
<pre>{| class="wikitable sortable colshideable"
|-
! class="unsortable hideable" | Hideable column
!Row 1
! class="unsortable" | Boring column
|colspan="2"|Long cell
! Sortable column
|Regular cell
|-
|-
| Cell just left of the image.
!Row 2
| colspan="2" rowspan="2" | A large cell for an image:
|rowspan="2"|Tall cell
[[File:Coiled Launcher.png]]
|colspan="2"|Long cell
|-
|-
| Blank cell?  Not quite.  In fact, far from:
!Row 3
*bullets
|Regular cell
*and all of that
|style="background-color:yellow"|Yellow cell
*nonsense
|- style="color: #ddd;"
| Bottom row: hard to read. || style="background: #555;" | Darker cell, so this one's clearer.  || Last cell.
|}</pre>
|}</pre>
 
|
produces:
{|class="wikitable"
{| class="wikitable sortable colshideable"
!
! class="unsortable hideable" | Hideable column
!Column 1
! class="unsortable" | Boring column
!Column 2
! Sortable column
!Column 3
|-
!Row 1
|colspan="2"|Long cell
|Regular cell
|-
|-
| Cell just left of the image.
!Row 2
| colspan="2" rowspan="2" | A large cell for an image:
|rowspan="2"|Tall cell
[[File:Coiled Launcher.png]]
|colspan="2"|Long cell
|-
|-
| Blank cell?  Not quite.  In fact, far from:
!Row 3
*bullets
|Regular cell
*and all of that
|style="background-color:yellow"|Yellow cell
*nonsense
|- style="color: #ddd;"
| Bottom row: hard to read. || style="background: #555;" | Darker cell, so this one's clearer.  || Last cell.
|}
|}
|}
Those are all the most useful features of tables on Pikipedia, though not all features are covered &ndash; a lot is possible with a table. If you're having trouble with a table, consider looking around the wiki for other tables and seeing what they do, looking at the [https://www.mediawiki.org/wiki/Help:Tables official MediaWiki table guide], or asking for help on the [https://discord.gg/msMKc3G Discord server].


{{help}}
[[Category:Help]]
[[Category:Help]]

Latest revision as of 13:14, May 26, 2023

Shortcut:
P:TABLE

This page explains how to create a table in an article. Tables use fairly complicated syntax in MediaWiki, but there are simple rules you can follow to make an effective and good-looking table.

The basics[edit]

To start a table, place the code {|class="wikitable" on a new line. The {| defines a table, and the class="wikitable" styles it in the standard table style. To mark the end of a table, place |} at the bottom.

Regular cells in the table start with the | (vertical bar) character. To add a cell, just start a line with this character and add the text you want to appear after it. Adding no extra text will make the cell empty. Cells will go from left to right in the order you add them.

To start a new row of the table, place |- on its own line.

Here is an example of these basic table features.

Wiki code Result 
{|class="wikitable"
|Cell 1
|Cell 2
|Cell 3
|-
|Cell 4
|Cell 5
|Cell 6
|}
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

Often, you want to make a cell a header cell. Header cells have a green background and bold text, and are commonly used on the top row and sometimes the left column of a table. To do this, replace the | with a !.

Wiki code Result 
{|class="wikitable"
!
!Column 1
!Column 2
|-
!Row 1
|
|
|-
!Row 2
|
|
|}
Column 1 Column 2
Row 1
Row 2

To save space, instead of having each cell on its own line, you can use the vertical bar (or exclamation mark) character twice to start a new cell. This can make the wiki code harder to read, so only do this when there's a good reason to.

Wiki code Result 
{|class="wikitable"
!Pikmin type !! Resistant to !! Attack power !! Throw height
|-
|[[Red Pikmin]] || Fire || 15 || Normal
|-
|[[Yellow Pikmin]] || Electricity || 10 || High
|-
|[[Blue Pikmin]] || Water || 10 || Normal
|}
Pikmin type Resistant to Attack power Throw height
Red Pikmin Fire 15 Normal
Yellow Pikmin Electricity 10 High
Blue Pikmin Water 10 Normal

Make sure that every row and column has the same number of cells. If you add an extra column to one row, make sure to do that for all rows, or weird empty spaces will appear in the table. Similarly, if you add a new row, make sure it has a cell for every column.

More advanced features[edit]

Additional properties can be added to cells, rows, and entire tables to change their appearance or functionality.

Let's start with the {|class="wikitable" at the start. More words can be added after wikitable to add more attributes to the table. Adding the text sortable allows each column to be sorted, which can be very useful, and additional attributes and options for each attribute are available. Here is an example of a sortable table.

Wiki code Result 
{|class="wikitable sortable"
!Ship part
!Weight
|-
|Main Engine
|20
|-
|Eternal Fuel Dynamo
|40
|-
|Gravity Jumper
|25
|-
|Geiger Counter
|15
|-
|Gluon Drive
|50
|-
|Zirconium Rotor
|30
|}
Ship part Weight
Main Engine 20
Eternal Fuel Dynamo 40
Gravity Jumper 25
Geiger Counter 15
Gluon Drive 50
Zirconium Rotor 30

It's also possible to add attributes to cells, by placing the property text after the vertical bar or exclamation mark, and then placing another vertical bar before the actual cell content. The most useful attributes are colspan and rowspan, which allow a cell to take up multiple columns or rows. The style attribute can be used to change a cell's appearance with CSS. A demonstration of how to use these attributes is below.

Wiki code Result 
{|class="wikitable"
!
!Column 1
!Column 2
!Column 3
|-
!Row 1
|colspan="2"|Long cell
|Regular cell
|-
!Row 2
|rowspan="2"|Tall cell
|colspan="2"|Long cell
|-
!Row 3
|Regular cell
|style="background-color:yellow"|Yellow cell
|}
Column 1 Column 2 Column 3
Row 1 Long cell Regular cell
Row 2 Tall cell Long cell
Row 3 Regular cell Yellow cell

Those are all the most useful features of tables on Pikipedia, though not all features are covered – a lot is possible with a table. If you're having trouble with a table, consider looking around the wiki for other tables and seeing what they do, looking at the official MediaWiki table guide, or asking for help on the Discord server.

Help
Reading Japanese • Searching
Editing Editing • FAQ • Files • Glossary • Help desk •
Helping out • Quick start guide • Tables
Others Chat • Group rights • Staff guidebook
Policies • Guidelines • Procedures • Help
Retrieved from "https://www.pikminwiki.com/index.php?title=Help:Tables&oldid=244888"