FANDOM


So you want to put a table on a wikia page? This basic guide will show you how to do the basics. However, it is expected that you have some knowledge of using Source mode and basic wikia markup.

Notes

I may be providing notation in the preview boxes like this: /* note here */. So if you copy and paste one of the preview boxes, don't be surprised when it doesn't look as intended, or if a box already has text inside of it. You should probably remove the "/* text here */"!

The Standard Form

{|
| /* first row, first column */
| /* first row, second column */
|-
| /* second row, first column */
| /* second row, second column */
|}

This will produce a very simple table, with no set width, nor height (will just be as small as possible automatically). Also text isn't centered and there is no border or background colour to the table. It will look like this:

/* first row, first column */ /* first row, second column */
/* second row, first column */ /* second row, second column */

Adding Extras

You may want to add extras to your table, such as centering, colour and alignment. You will need to find the element of the table that you wish to alter (each element begins with "|") and then you need to add in the command (it will look like "| <command here> |" - and no, the pointy brackets are not meant to be put in!).

{|
! example
| using "!" instead of "|" makes it a title box
|-
| align="left" | example
| aligns text to the left
|-
| align="center" | example
| aligns text to the centre (center)
|-
| align="right" | example
| aligns text to the right
|-
| style="background: #cdffff" | example
| colour a box (uses Hex code)
|}

This code will result in the following:

example " makes it a title box
example aligns text to the left
example aligns text to the centre (center)
example aligns text to the right
example colour a box (uses Hex code)

Colspan & Rowspan

It can be very helpful to have tables which are not 'regular'. Basically, for one row you may wish to have 2 columns and for the next row, you may wish for 4 columns - but importantly, you want it to all fit inside a single rectangle table area. For this we use the commands "rowspan" and "colspan".

{|
| colspan="2" | /* We used colspan="2" to get a row which acts as 2 rows, but in 1 */
| colspan="2" | /* We could change it to colspan="n" for any quantity 'n' of rows */
|-
| /* Since we didn't use colspan="n" here, we get a normal table */
|
|
|
|}

This code gives us:

/* box */ /* box */
/* box */ /* box */ /* box */ /* box */

We may want the opposite, i.e. columns which have boxes that take up more than one row.

{|
| rowspan="3" |
|
|-
|
|-
|
|}

Which will give us:

/* box */ /* box */
/* box */
/* box */

Using rowspan and colspan are very useful, but can be confusing at first. Practice, of course, makes perfect - but you may find you get it wrong a lot at first and it may end up like this.

oh noes! I fucked up!
Silly me! Ughh!

Don't worry about it! It happens, and I'm (Mehr|GoatOnTheRun) willing to help.

The Header

The header I am refering to, is this:

{| /* THIS IS THE HEADER! */
|
|
|}

When left blank, you get a table with no borders, no anything! The next chapter down on this page supplies you with the standard table header for this Wikia (we use a standard so that every table on the Wiki has the same style and matches up). As a spoiler to the next chapter, this is the standard header.

{| class="wikitable sortable jquery-tablesorter" style="border-color:rgb(229,205,190);color:rgb(0,0,0);font-size:13px;line-height:21px;width:500px;text-align:center;" cellpadding="2" cellspacing="0"

We don't want to change too much of it, but there is some stuff in there that it would be helpful to edit from time to time. I'll go through it bit-by-bit.

{| class="wikitable sortable jquery-tablesorter" 

/* we don't want to edit this bit! */


style="border-color:rgb(229,205,190);color:rgb(0,0,0);font-size:13px;line-height:21px;width:500px;text-align:center;"

/* you may want to change the font size, larger numbers denote larger sized fonts */

/* you may want to edit the width. You need to edit where it says "500px". Examples of what you can change this to are; "750px", "auto", "50%", "100%" or "200px" */

/* you may want to edit the text-align. Changing "center" (American spelling only!) to "right" or "left" will alter where text sits in your table */


cellpadding="2" cellspacing="0"

/* we don't want to edit this bit! */


ArteroPk's Standard

To keep everything on this Wiki looking stylish and consistant, we use the same table header for all of our tables (with minor edits if you need something more specific, see above chapter). Copy and paste (and remove the /* notes */) onto your page!

{| class="wikitable sortable jquery-tablesorter" style="border-color:rgb(229,205,190);color:rgb(0,0,0);font-size:13px;line-height:21px;width:500px;text-align:center;" cellpadding="2" cellspacing="0"
! /* as many */
! /* titles as */
! /* you'd like */
|-
| /* want */
| /* more */
| /* rows? */
|-
| /* add */
| /* them */
| /* in! */
|}

Which looks like this:

/* as many */ /* titles as */ /* you'd like */
/* want */ /* more */ /* rows? */
/* add */ /* them */ /* in! */
Community content is available under CC-BY-SA unless otherwise noted.