Help:Tables

From Zelda Wiki, the Zelda encyclopedia
Jump to: navigation, search
ZW Logo White.png
Getting Involved Getting Involved.png
Getting Involved
Zelda Wiki:Forum Recent News.png
Forum
Discussion Center OoT Navi.png
Discussion Center
Image edit request and support center TWWHD Fishman Artwork.png
Image Alteration
Image retrieval request and support center Picto Box TWW.png
Image Retrieval
Guidelines and Policies Book of Mudora.png
Help Guide








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
|}
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
|}
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
|}
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
----
|}
  • 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
|}
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
|}
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
|}
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
|}
Enemy Hit Points
Moblin 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
|}
Enemy Hit Points
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" border="1" cellpadding="2"
! 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)
Arrow(10)Arrows (10)
40
20
Bombs(10)Bombs (10)
40
10
Red PotionRed Potion
80
50

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
|}
GameCube Games
The Wind Waker Four Swords Adventures Twilight Princess
{| class="wikitable"
! Resulting Element
! colspan="2" | Combination
|-
| Lava
| Earth || Fire
|-
| Steam
| Water || Fire
|}
Resulting Element 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
|}
Price 120
100
{| class="wikitable"
| Left
| rowspan="2" | Center
| Right
|-
| 1
| 2
|-
| A
| B
| C
|}
Left Center Right
1 2
A B C


Mixed

Advanced layouts can be made by mixing the two attributes.

Code Result
{| class="wikitable" style="text-align: center;"
! width=60| Criteria
! colspan="2" width=60| First
|- 
! rowspan="2" height=60| Second
| {{Y}}
| {{Y}}
|-
| {{Y}}
| {{N}}
|}
Criteria First
Second Yes Yes
Yes No
{| class="wikitable"
!colspan=3|Other Prizes in the Past
!colspan=3|Other Prizes in the Present
|-
! Skill Level
! Correct moves
! Prize
! Skill Level
! Correct moves
! Prize
|-
!rowspan=2|Silver
|<center>6-7</center>
|50 rupees
!rowspan=2|Bronze
|<center>6-7</center>
|30 Rupees
|-
|<center>All 8</center>
|Gasha Seed
|<center>All 8</center>
|100 Rupees
|-
!rowspan=2|Gold
|<center>6-7</center>
|Gasha Seed
!rowspan=2|Silver
|<center>6-7</center>
|50 Rupees
|-
|<center>All 8</center>
|Magical Ring
|<center>All 8</center>
|Gasha Seed
|-
!rowspan=2|Platinum
|<center>6-7</center>
|Gasha Seed
!rowspan=2|Gold
|<center>6-7</center>
|Gasha Seed
|-
|<center>All 8</center>
|Magical Ring
|<center>All 8</center>
|Magical Ring
|}
Other Prizes in the Past Other Prizes in the Present
Skill Level Correct moves Prize Skill Level Correct moves Prize
Silver
6-7
50 rupees Bronze
6-7
30 Rupees
All 8
Gasha Seed
All 8
100 Rupees
Gold
6-7
Gasha Seed Silver
6-7
50 Rupees
All 8
Magical Ring
All 8
Gasha Seed
Platinum
6-7
Gasha Seed Gold
6-7
Gasha Seed
All 8
Magical Ring
All 8
Magical Ring