The largest and most comprehensive Wizard101 Wiki for all your Wizard101 needs! Guides, Pets, Spells, Quests, Bosses, Creatures, NPCs, Crafting, Gardening and more!

As part of the largest Wizard101 Community and Wizard101 Forums online, this is a community wiki that anyone can contribute to!

Click here to make a free account to edit this wiki and the related forums at Wizard101 Central.

Editing Guide/Tables

From Wizard101 Wiki
Jump to: navigation, search

Click to head back to the Editing Guide

Tables

Tables are commonly used, so if you require a table the instructions below should help you craft a table to suit the needs of the article.

Tables should use a "class" design when possible, and should include as little 'fancy' formatting as possible. Tables can also be made sortable by adding a "sortable" class.


Wiki Table Markup

Syntax Description
{| table start
|+ table caption
! table header cell
|- table row start
| table cell
|} table close


  • Use {| to begin a table and |} to end it. The table open and close need to be type on their own line -
{|
   table code goes here
|}
  • A table caption can be used by typing |+ inside the table (please note that a caption is optional) -
{|
|+ caption goes here
   table code goes here
|}
  • A table row can be created by typing |- inside the table -
{|
|+ the table's caption
|-
   cell code and data goes here (1st row)
|-
   cell code and data goes here (2nd row)
|}
  • Tables cells within each row are created with a pipe ( | ) -
{|
|+ the table's caption
|-
|  cell data goes here
|-
|  the next row's cell goes here
|  another cell in the same row goes here
|}
  • Cells in each row can be separated with a double pipe ( || ) or a pipe starting on a new line -
{|
|+ the table's caption
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 1
|Cell 2
|Cell 3
|}
  • Column headings are created with a ! inside the table. Tables can have numerous headings -
{|
|+ the table's caption
! Column 1 Heading !! Column 2 Heading !! Column 3 Heading
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 1
|Cell 2
|Cell 3
|}
  • Various attributes can be applied to the table in order to alters it's format -
{| border = 1  creates a table "grid"
|+ the table's caption
! Column 1 Heading !! Column 2 Heading !! Column 3 Heading
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 1
|Cell 2
|Cell 3
|}
  • Here is the table created using the tutorial above -
the table's caption
Column 1 Heading Column 2 Heading Column 3 Heading
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3


Table Attributes

Borders

Borders create sort of a "grid" formatted table. Tables that use the border attribute can be seen all over the Wiki, such as the Badges information page.

  • The border attribute can be applied to the table using border = any number here -
{| border = 1
|+ the table's caption
! Column 1 Heading !! Column 2 Heading !! Column 3 Heading
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 1
|Cell 2
|Cell 3
|}
  • You Get -
the table's caption
Column 1 Heading Column 2 Heading Column 3 Heading
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3


  • Another table example using the border attribute -
{| border = 3
|+ the table's caption
! Column 1 Heading !! Column 2 Heading !! Column 3 Heading
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 1
|Cell 2
|Cell 3
|}
  • You Get -
the table's caption
Column 1 Heading Column 2 Heading Column 3 Heading
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3


Cell Spacing

Cell spacing is the amount of space that separates each cell in a table. Here is an example.

  • The cell spacing attribute can be applied to the table using cellspacing = any number here -
{| border = 1 cellspacing = 4
|+ the table's caption
! Column 1 Heading !! Column 2 Heading !! Column 3 Heading
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 1
|Cell 2
|Cell 3
|}
  • You Get -
the table's caption
Column 1 Heading Column 2 Heading Column 3 Heading
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3


Cell Padding

Cell padding is the amount of space surrounding the text within a cell.

  • The cell padding attribute can be applied to the table using cellpadding = any number here -
{| border = 1 cellpadding = 5
|+ the table's caption
! Column 1 Heading !! Column 2 Heading !! Column 3 Heading
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 1
|Cell 2
|Cell 3
|}
  • You Get -
the table's caption
Column 1 Heading Column 2 Heading Column 3 Heading
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3


Table Allignment

Tables can be aligned either to the left, in the center, or to the right.

  • The align attribute can be used by applying align = position here
{| border = 1 align = center
|+ the table's caption
! Column 1 Heading !! Column 2 Heading !! Column 3 Heading
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 1
|Cell 2
|Cell 3
|}
  • You Get -
the table's caption
Column 1 Heading Column 2 Heading Column 3 Heading
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3


  • You can also use align = right and align = left.


Width

The width and height of a table can be altered to your liking. Although height is usually not defined, it is still nice to work in a definitive space.

  • The width of a table can be defined by using width = any number between 1% - 100% -
{| border = 1 width = 50%
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 1 || Cell 2 || Cell 3
|-
|Cell 1 || Cell 2 || Cell 3
|}
  • Applying a 50% width to the table is forcing the table to occupy half the page's width -
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3


  • The variation can be seen when the width is set to 100%, enabling to table to use the page's entire width -
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3


Cell and Row Attributes

Vertical Alignment

If you want to align the data in cells and rows, you will have to use the vertical align attributes.

Value Description
top top-align content
middle center-align content
bottom bottom-align content


  • Examples -
{| border="1" cellpadding="2"
|-valign="top"
|width="10%"|'''Row Heading'''
|width="70%"|''"Help save Wizard City..."''
|width="20%"|A shorter piece of text.
|-valign="top"
|'''Row heading'''
|''"Help save Wizard City..."''
|A shorter piece of text.
|}
  • You Get -
Row Heading "Help save Wizard City in Wizard101, a free to play MMO Wizards game. Create your own Wizard and embark on your Wizard school adventure. Play fun Wizard games with collectible card magic, Wizard duels, and far off worlds that are safe for kids and fun for players of all ages!" A shorter piece of text.
Row heading "Help save Wizard City in Wizard101, a free to play MMO Wizards game. Create your own Wizard and embark on your Wizard school adventure. Play fun Wizard games with collectible card magic, Wizard duels, and far off worlds that are safe for kids and fun for players of all ages!" A shorter piece of text.


  • valign = middle
Row Heading "Help save Wizard City in Wizard101, a free to play MMO Wizards game. Create your own Wizard and embark on your Wizard school adventure. Play fun Wizard games with collectible card magic, Wizard duels, and far off worlds that are safe for kids and fun for players of all ages!" A shorter piece of text.
Row heading "Help save Wizard City in Wizard101, a free to play MMO Wizards game. Create your own Wizard and embark on your Wizard school adventure. Play fun Wizard games with collectible card magic, Wizard duels, and far off worlds that are safe for kids and fun for players of all ages!" A shorter piece of text.


  • valign = bottom
Row Heading "Help save Wizard City in Wizard101, a free to play MMO Wizards game. Create your own Wizard and embark on your Wizard school adventure. Play fun Wizard games with collectible card magic, Wizard duels, and far off worlds that are safe for kids and fun for players of all ages!" A shorter piece of text.
Row heading "Help save Wizard City in Wizard101, a free to play MMO Wizards game. Create your own Wizard and embark on your Wizard school adventure. Play fun Wizard games with collectible card magic, Wizard duels, and far off worlds that are safe for kids and fun for players of all ages!" A shorter piece of text.


Example Tables

{| width = 60% border = "1"
|width="25%"|
'''Title'''
|width="75%"|
'''Condition'''
|-
|height="45"|
|
|-
|height="45"|
|
|-
|height="45"|
|
|-
|height="45"|
|
|-
|height="45"|
|
|-
|height="45"|
|
|-
|height="45"|
|
|-
|}

Title

Condition


I am a caption
Heading one Heading two Heading three
Row heading 1 Row data 2b Row data 3c
Row heading 2 Row data 2b Row data 3a
Row heading 3 Row data 2c Row data 3b

{| class="toccolours sortable"
|+ I am a caption
|-
! Heading one || Heading two || Heading three
|-
| class="title" | Row heading
| Row data 2
| Row data 3
|-
| class="title" | Row heading
| Row data 2
| Row data 3
|-
| class="title" | Row heading
| Row data 2
| Row data 3
|}


Heading one Heading two Heading three
Row data 1 Row data 2 Row data 3
Row data 1 Row data 2 Row data 3
Row data 1 Row data 2 Row data 3
Row data 1 Row data 2 Row data 3

{| class="toccolours"
|-
! Heading one || Heading two || Heading three
|-
| Row data 1
| Row data 2
| Row data 3
|-
| Row data 1
| Row data 2
| Row data 3
|- class="alt"
| Row data 1
| Row data 2
| Row data 3
|-
| Row data 1
| Row data 2
| Row data 3
|- class="alt"
| Row data 1
| Row data 2
| Row data 3
|}

Personal tools
Namespaces

Variants
Actions
 
Wizard101 Wiki