Help:Tables

From Zelda Wiki, the Zelda encyclopedia

Zelda Wiki's Help Guide

Basic Editing: Getting Started Citing Sources Images and Uploading Protected Pages Redirects Talk Pages Templates (Template List) Userboxes (Userbox List) Guidelines and Policies: Canon Policy Editing Etiquette Featured Content Image Deletion Policy Inter-Wiki Policy Nintendo Article Guidelines Quality Standards User Accounts Advanced Editing: Archiving Talk Pages Article Reorganization CSS, Javascript, and HTML Custom Signatures Merging and Moving Pages Patrolling Edits Tables User Navigation Bars WikiExclusives General Information Staff Ask the Staff! User Rights Skype About Glossary

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

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.

{| 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 |-

{| 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).

{| class="wikitable"
| 1st Cell || 2nd Cell || 3rd Cell
|-
|    A     ||    B     ||    C
|}

You can also use wiki markup in tables.

{| 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.

{| class="wikitable"
! Header 1
! Header 2
|-
| 1st Cell
| 2nd Cell
|}

Table Caption

Table can be given captions by using |+

{| 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.

{| 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

{| 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.

{| 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.

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:

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.

{| 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.

{| 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.

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
{| 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