Getting Involved Getting Involved |
Discord Discord |
Knight Challenges Knight Challenges |
Image edit request and support center Image Requests |
Trello Boards Trello |
Guidelines:Main Guidelines |
---|
Tables are great for organizing data and information in a user-friendly way. They can be made using XHTML, wiki coding or a combination of the two. This guide will mainly cover the wiki coding portion as the other has hundreds of great, publicly available tutorials on the Internet. The main advantage of wiki coding is that it tends to be much simpler than XHTML and easier to edit. However, it can occasionally be limited in functionality, making XHTML an important part of advanced tables.
Table Building Terms
Wiki Code | HTML | Use(s) | Notes |
---|---|---|---|
{| | <table> | Start of a table | Must be on a new line |
|+ | <caption> | Table Caption / Title | Optional. Must come immediately after start of table. |
|- | <tr> | New row | Optional for first row. Required for subsequent rows. |
! | <th> | Header cell | Must be on a new line |
| | <td> | Normal cell | Must be on a new line |
Assign parameters to cells | Must be on same line as ! or | | ||
|} | </table> | End of a table | Must be on a new line |
Some characters cannot be used in certain situations, usually in complex templates. Some templates to use if such situations arise are as follows:
{{!}} - Produces a pipe ( | )
{{!-}} - Produces a piped hyphen ( |- )
View all workarounds here.
Basics
The most basic components of a table are the {| and |} tags (hereon referred to as "table tags") and | (pipe). The table tags begin and end the table, while the actual contents of the table are in cells initiated by a single pipe.
Code | Result | |||
---|---|---|---|---|
{| class="wikitable" | 1st Cell | 2nd Cell | 3rd Cell |} |
|
Note:
- The cells are created horizontally, from left to right. This basic fact becomes important in more complex tables (see Colspan and Rowspan)
- The table start tag ( {| ) is followed by
class="wikitable"
. This little bit of code produces the most commonly used table style. It should look good for most purposes.
To create a new row of cells, use |-
Code | Result | ||||
---|---|---|---|---|---|
{| class="wikitable" | 1st Cell | 2nd Cell |- | 3rd Cell | 4th Cell |} |
|
The cells in one row can be written on one single line, separated by || (double pipe).
Code | Result | ||||||
---|---|---|---|---|---|---|---|
{| class="wikitable" | 1st Cell || 2nd Cell || 3rd Cell |- | A || B || C |} |
|
You can also use wiki markup in tables.
Code | Result | ||
---|---|---|---|
{| class="wikitable" | * Bullet * Points * List | Horizontal line ---- |} |
|
Table Header
Table headers can be created by using ! (exclamation mark) instead of | (pipe). The text in a header is usually bolded and centered.
Code | Result | ||||
---|---|---|---|---|---|
{| class="wikitable" ! Header 1 ! Header 2 |- | 1st Cell | 2nd Cell |} |
|
Table Caption
Table can be given captions by using |+
Code | Result | ||||
---|---|---|---|---|---|
{| class="wikitable" |+ Enemy Analysis ! Enemy ! Hit Points |- | Moblin | 10 |} |
|
Attributes
Table Attributes
Placing attributes directly after the table start tag ( {| ) applies the attributes to the entire table.
Code | Result | ||||
---|---|---|---|---|---|
{| class="wikitable" style="text-align:right; color:yellow !important;" ! Enemy ! Hit Points |- | Moblin | 10 |} |
|
Cell Attributes
To apply attributes to an individual cell, write the table code in the following format:
| attributes | Cell Contents
or for a header:
! attributes | Header Contents
Code | Result | ||||
---|---|---|---|---|---|
{| class="wikitable" ! style="font-size: 200%" | Enemy ! Hit Points |- | Moblin | style="text-align: right" | 10 |} |
|
Row Attributes
To apply attributes to an single row, write the attributes directly after |-
To modify the topmost row, type |- followed by the desired attributes on a line before creating any cells.
Code | Result | ||||
---|---|---|---|---|---|
{| class="wikitable" |- style="font-size:200%" ! Enemy ! Hit Points |- style="color: yellow !important;" | Moblin | 10 |} |
|
Stylization
These are some of the most commonly used table styles. Knowledge of XHTML greatly aids in this section.
"#" indicates that a number must be placed between the quotation marks. The default unit is pixels, where appropriate.
Code | Explanation |
---|---|
class="wikitable" | Makes a standard table |
class="wikitable sortable" | Makes a sortable table |
style="text-align: center;" | Centers the text in a table |
border="#" | Sets the size of the border around the entire table Standard value is "1" |
cellpadding="#" | Sets the amount of padding (space between the text and the table walls) within the cells. "2" is considered the minimum. |
colspan="#" | Prompts the cell to span across "#" columns |
rowspan="#" | Prompts the cell to span across "#" rows |
width="#" | Sets the width of the table/column |
height="#" | Sets the height of the table/row |
Sortable Tables
For sortable tables, a key is sometimes required to determine the sorting possibilities. It can be used by typing the following:
- {{Key| text }}
The following:
{| class="wikitable sortable" ! Item ! Selling Price (Winter) ! Selling Price (Spring) |- | {{Key|Arrow(10)}}[[Arrow]]s (10) | <center>40</center> | <center>20</center> |- | {{Key|Bombs(10)}}[[Bomb]]s (10) | <center>40</center> | <center>10</center> |- | {{Key|Red Potion}}[[Red Potion]] | <center>80</center> | <center>50</center> |} |
produces:
Item | Selling Price (Winter) | Selling Price (Spring) |
---|---|---|
Arrows (10) | ||
Bombs (10) | ||
Red Potion |
Irregularly Celled Tables
Colspan
Sometimes it is necessary to merge two cells together. If these cells are beside each other horizontally, the colspan attribute is used.
Code | Result | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
{| class="wikitable" ! colspan="3" | GameCube Games |- | The Wind Waker | Four Swords Adventures | Twilight Princess |} |
| |||||||||
{| class="wikitable" ! Resulting Element ! colspan="2" | Combination |- | Lava | Earth || Fire |- | Steam | Water || Fire |} |
|
Rowspan
To merge two cells vertically, use the rowspan attribute.
In order to utilize this attribute properly, it is important to understand how tables are rendered. Once a cell is merged with the ones below it, the lower cells are "reserved".
For example, say that you merge all the cells in column 2 by placing some code in the topmost cell. When you create a new row and begin filling it with cells, you will only be able to create cells for columns 1, 3 and beyond, automatically skipping column 2.
In another example, say that you merge only the first two cells in column 2. In the first row, you use the "rowspan" attribute in column 2. In the second row, the cells automatically skip column 2, since that cell is "reserved". In the third row, you can once again create cells in column 2, since there are no reserved cells.
Code | Result | ||||||||
---|---|---|---|---|---|---|---|---|---|
{| class="wikitable" ! rowspan="2" | Price | 120 |- | 100 |} |
| ||||||||
{| class="wikitable" | Left | rowspan="2" | Center | Right |- | 1 | 2 |- | A | B | C |} |
|
Mixed
Advanced layouts can be made by mixing the two attributes.