Tables

Tables[edit | edit source]

Tables are a useful structure for organizing data. Let's get started.

Starting and ending a table[edit | edit source]

Tables always start by using a {| and end by using a |}

Adding data to the table[edit | edit source]

Adding data to a table is easy. Every element starts with a | and everything after that on that line is part of that element:

Apples Oranges Bananas


Syntax:

{|
|Apples
|Oranges
|Bananas
|}

Listing elements on the same row[edit | edit source]

One might notice that for large lists, that could look very ugly, listing everything on its own line. In order to fix this, you can end an element with a | instead of the new line ending it for you. This doesn't affect rendering at all.

Apples Oranges Bananas


Syntax:

{|
| Apples || Oranges || Bananas
|}
While adding the extra | after an element that is the last in the line may seem like a good idea, it is currently disallowed.
{|
| Apples || Oranges || Bananas |
                               ^ disallowed 
|}

Better Formatting[edit | edit source]

I think that it doens't look great that all of the items are squished together. In order to rectify this, add class="wikitable" right after the {| that starts your table:

Apples Oranges Bananas
{| class="wikitable"
| Apples || Oranges || Bananas
|}

Adding rows[edit | edit source]

Alright, that's awesome, but at some point, we are going to want to add different rows. To do this, add a |- whenever you want to start a new row:

Apples Oranges Bananas
Tacos Nachos Tortillas
Hamburger French Fries Milkshake


Syntax:

{| class="wikitable"
| Apples || Oranges|| Bananas
|-
| Tacos || Nachos || Tortillas
|-
| Hamburger || French Fries || Milkshake
|}

Adding a caption[edit | edit source]

Ok, cool. We have rows, we have columns. Only if we could say what the table is of.

To add a caption to a table, add a |+ after the {| that was used to start the table:

My Favorite Foods
Apples Oranges Bananas
Tacos Nachos Tortillas
Hamburger French Fries Milkshake


Syntax:

{| class="wikitable"
|+My Favorite Foods
| Apples || Oranges|| Bananas
|-
| Tacos || Nachos || Tortillas
|-
| Hamburger || French Fries || Milkshake
|}


Adding Headers to Columns[edit | edit source]

Let's label our columns! To do this, start the item with ! instead of |:

My Favorite Foods
#1 favorite #2 favorite #3 favorite
Apples Oranges Bananas
Tacos Nachos Tortillas
Hamburger French Fries Milkshake


Syntax:

{| class="wikitable"
|+My Favorite Foods
! #1 favorite !! #2 favorite !! #3 favorite
|-
| Apples || Oranges|| Bananas
|-
| Tacos || Nachos || Tortillas
|-
| Hamburger || French Fries || Milkshake
|}


Adding attributes[edit | edit source]

Almost all customization is done with attributes. Attributes are added by typing the attribute name, a =, then the value of the attribute in "s. There can be any number of attributes, separated by spaces. Finally, after all of the attributes, there is a | then the content of the item.

One attribute that we have already seen is the class attribute Example:

Red Text
Green Text Regular text


Syntax:

{| class="wikitable"
| style="color: red; text-align: right" colspan="2" | Red Text
|-
| style="color: green" | Green Text || Regular text
|}
For the HTML knowing users, attributes line up with HTML attributes.

Table-wide attributes[edit | edit source]

Attributes can be applied to the entire table by adding them after the opening {|:

This is
all red


Syntax:

{| style="color: red" class="wikitable"
| This
| is
|-
| all
| red
|}


Row-wide attributes[edit | edit source]

Attributes also can be applied to a row in its entirety by putting the attribute after the |- that started the row. If applying to the first row, you need to add the optional |-.

This is all green
This is all red


Syntax:

{| class="wikitable"
|- style="color: green" 
| This || is || all || green
|- style="color: red"
| This || is || all || red
|}

List of common attributes[edit | edit source]

This is by no means a exhaustive list of attributes. For one of those find a HTML reference.

The style attribute[edit | edit source]

As shows above the style attribute can be very powerful in styling text. In the style quotes, CSS styling text is inserted. Here is a CSS reference guide.

Red


Syntax:

{| class="wikitable"
| style="color: red" | Red
|}

The colspan and rowspan attributes[edit | edit source]

These attributes express how many rows or columns that the item should span. Using this can be very powerful, but can get messy quick. It is suggested that you format your Wikitext to be easier to read.

Pick Me
You


Syntax:

{| class="wikitable"
| colspan="2" rowspan="2" | Pick || Me
|-
|                                   You
|}

See Also[edit | edit source]

For a reference on table documentation, see this page.