Help:Table
- NOTE! The author of this article uses some self-made terms for explaining how to use tables.
Tables are used to display information in an easy-to-read manner. Depending on how you want the table to look, you can open it with {| or {|- but is always closed with |}. For the coding to register as a table starter and closer, it must be the first thing written on a line.
Defining Parameters
The first lines of coding in your table will determine how the cells (the fields in the table) appear and how text and images in them are treated. Let's begin with a basic table. The following coding...
{| cellspacing="1" cellpadding="1" border="1"
|-
| Example
| Example
| Example
|-
|}
Creates a table like this:
| Example | Example | Example |
Now, the four lines of text in that opening line determine the appearance of the table. "Cellspacing" is how far apart the boxes formed by the table will be. "Cellpadding" determines how far from the inside edges of the boxes the images and text inside them will be. "Border" determines how thick the lines separating the boxes are, and "align" is where on the page the table displays, left, right or centered. The cellspacing, cellpadding, and border fields are all set to 1 in the above table. Increase one of those to 5 and the results are obvious: from left to right, cellspacing set to 5, cellpadding set to 5, and border set to 5.
|
|
|
You can see how each of the fields changes the appearance of the table. Generally we ask that cellpadding be set to 2, border set to 1, and cellspacing set to 0 when coding a table for use in the main Wiki. However, on your userpage you're free to make your table look however you like.
Now, once the first line of text is set up to give your table it's features, you can determine what is said in the table. After the line beginning with "{|", begin a new line and type "|" followed by your text. You can do this as many times as you like, making your table have as many fields as you like.
| Example | Example | Example | Example | Example | Example | Example | Example | Example |
Adding a second row is simple. Begin a new line and type "|-". This denotes a new row, any entries after that will be in this new row. You can still add more than one field per row. For example
{| cellspacing="1" cellpadding="1" border="1"
|-
| Example
| Example
|-
| Example
| Example
|-
| Example
| Example
|}
Yields this:
| Example | Example |
| Example | Example |
| Example | Example |
Note: While creating new tables on the MarioWiki's mainspace articles, use class="table" parameter in order to maintain the recently set standard.
Defining Widths
The problem with the tables you see above is that the width of the fields changes depending on what's inside. For example, longer words will stretch the box more, as so:
| Hi | Hello | Greetings |
To avoid this, you can set your boxes in the table to pre-defined widths, which will make all the fields in the column the same size regardless of text. To do this, after you begin an entry type "|width=x%|" where "x" is whatever width you like. To avoid the table distorting, every column should have a set width, and the combined percentage of the widths should be 100%. Also, at this time you can set a width for the table itself in the first line in the same way, so the table takes up exactly as much of the width of the page as you like. For example:
{| cellspacing="1" cellpadding="1" border="1" width="50%"
|-
|width=30%|Hi
|width=50%|Hi
|width=20%|Hi
|-
| Hello
| Hello
| Hello
|-
| Greetings
| Greetings
| Greetings
|}
Yields this:
| Hi | Hi | Hi |
| Hello | Hello | Hello |
| Greetings | Greetings | Greetings |
As you can see, each field in the table is set to the width we gave it even though the text inside is much too small to fill the area. Note that setting your width percentages treats those percentages as portions of the table itself. Ergo, in the above example the field set to 50% wide is not half the page wide, it is half the table wide.
You may wish to define your table with pixels instead. We often use this on the Wiki in situations where different monitor types and different Wiki skins can effect the actual width of the pages, and thus "100%" wide tables can appear differently to different people. Pixel widths, however, are set and thus appear the same to all viewers regardless of their skin or monitor. To set pixel widths, instead of "width=x%" use "width=xpx". It's that simple.
{| cellspacing="1" cellpadding="1" border="1" width="400px"
|-
|width=75px|Hi
|width=200px|Hi
|width=125px|Hi
|-
| Hello
| Hello
| Hello
|-
| Greetings
| Greetings
| Greetings
|}
Yields this:
| Hi | Hi | Hi |
| Hello | Hello | Hello |
| Greetings | Greetings | Greetings |
As you can see, once the first fields in the table are given a set width, all fields in the column below them conform to that same width. Note that pixel widths and percentage widths are incompatible, and you cannot use both within the same table, it has to be one or the other.
Coloring Your Table
Here on the Wiki, function and aesthetics are both important when it comes to tables. To color a table's field, type "|bgcolor="xxxxxx"|" where "xxxxxx" is the hexidecimal coding for whatever color you like. Alternatively you can put the name of the color. A list of colors and their hexidecimal coding can be found here. For example:
{| cellspacing="1" cellpadding="1" border="1" width="40%"
|-
|bgcolor=red|Hi
|bgcolor=blue|Hi
|bgcolor=green|Hi
|}
Yields this:
| Hi | Hi | Hi |
Unlike width though, coloring in this manner only affects one field, not the fields below it. Let's take the above table and add two more rows to it.
| Hi | Hi | Hi |
| Hello | Hello | Hello |
| Greetings | Greetings | Greetings |
Now, if your table has a lot of columns, it can be a pain to add color settings to every field. Fortunately there's a way to set one color to all the fields in a row. As explained above, "|-" is used to begin a new row. But, if you type "|-bgcolor=xxxxx" to begin a new row, all fields in that row will be that color. For example:
{| cellspacing="1" cellpadding="1" border="1" width="40%"
|-bgcolor=red
|Hi
|Hi
|Hi
|Hi
|Hi
|-bgcolor=blue
| Hello
| Hello
| Hello
| Hello
| Hello
|-bgcolor=green
| Greetings
| Greetings
| Greetings
| Greetings
| Greetings
|}
Yields this:
| Hi | Hi | Hi | Hi | Hi |
| Hello | Hello | Hello | Hello | Hello |
| Greetings | Greetings | Greetings | Greetings | Greetings |
Note however, that there is no coding to make a background color apply to all fields in a given column. If you wish to color the fields of a column the same, you must add the bgcolor coding to each individual field.
Here on the Wiki we use special "class"-type coding on our templates for coloring. This is a simple convenience, Mario has over 200 games and we use a handful of specific colors for templates for each game. Thus, typing "class=SMB1a" is much easier than remembering the hexidecimal coding for the same color. A list of these "class"-type codes can be found here. The class-type coding for colors is used the same way as the bgcolor coding, and is placed in the same position.
Text Formatting
In the tables you've seen so far, the text has been unimportant as we focus on showing you how to determine the appearance of your table. Now we will teach you how, using the table, to pre-set formatting for text. First, alignment. With no coding in the table to tell it otherwise, text will automatically align to the left. To align it otherwise, in the first row of the table with cellspacing, etc, type "style="text-align:xxxxx" where "xxxxx" is left, right or center. This will automatically makes the text align itself in that manner. For example:
{| cellspacing="1" cellpadding="1" border="1" width="40%" style="text-align:center"
|-
|Hi
|Hi
|Hi
|Hi
|Hi
|-
|}
Yields this:
| Hi | Hi | Hi | Hi | Hi |
In addition, you can place that "style=" coding on the "|-" like as you can with colors, and only align the text in that row.
{| cellspacing="1" cellpadding="1" border="1" width="40%"
|-
|Hi
|Hi
|Hi
|Hi
|Hi
|- style="text-align:center"
| Hello
| Hello
| Hello
| Hello
| Hello
|-
| Greetings
| Greetings
| Greetings
| Greetings
| Greetings
|}
Yields this:
| Hi | Hi | Hi | Hi | Hi |
| Hello | Hello | Hello | Hello | Hello |
| Greetings | Greetings | Greetings | Greetings | Greetings |
Now, you can also do that in single cells, with "|align="center"|":
{| cellspacing="1" cellpadding="1" border="1" width="40%"
|-
|Hi
|align="center"|Hi
|Hi
|align="center"|Hi
|Hi
|-
|}
Yields this:
| Hi | Hi | Hi | Hi | Hi |
In addition, if you use a "!" instead of a "|" on a line, all text in that line is automatically centered and bolded without any additional coding needed. For example:
{| cellspacing="1" cellpadding="1" border="1" width="40%"
|-
!Hi
!Hi
!Hi
!Hi
!Hi
|-
|}
Yields this:
| Hi | Hi | Hi | Hi | Hi |
|---|
To color text, you use coding very similar to the coding to determine text alignment - "style="color:xxxxx"." For example:
{| cellspacing="1" cellpadding="1" border="1" width="40%"
|-
|style="color:red"|Hi
|Hi
|Hi
|Hi
|Hi
|-
|}
Yields this:
| Hi | Hi | Hi | Hi | Hi |
As you can see, this also colors the inside of the field. If you just want the text colored, use "<font color=xxxxx>" followed by the text you want colored, then "</font>".
{| cellspacing="1" cellpadding="1" border="1" width="40%"
|-
|<font color=red>Hi</font>
|Hi
|Hi
|Hi
|Hi
|-
|}
| Hi | Hi | Hi | Hi | Hi |
Colspan and Rowspan
To begin explaining how to use colspan and rowspan coding, let's create a basic table first.
| Hi | Hi | Hi | Hi | Hi |
| Hello | Hello | Hello | Hello | Hello |
| Greetings | Greetings | Greetings | Greetings | Greetings |
As you can see the fields are arranged in a uniform grid pattern, much like a spreadsheet. Colspan and rowspan allow the fields in a table to extend beyond their normal borders. For example:
{| cellspacing="1" cellpadding="1" border="1" width="50%"
|-
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|-
|colspan=3|Hello
| Hello
| Hello
|-
| Greetings
| Greetings
| Greetings
| Greetings
| Greetings
|}
Yields this:
| Hi | Hi | Hi | Hi | Hi |
| Hello | Hello | Hello | ||
| Greetings | Greetings | Greetings | Greetings | Greetings |
As you can see, the first "Hello" field expands in width to cover three columns. It will do this for however many columns we tell it to - typing "colspan=5" would have it extend all the way across the table. To make the table appear properly, since the first "Hello" field is taking up three columns, those two fields that would normally fall under the second and third columns can be deleted. Rowspan works the same way, but with rows naturally.
{| cellspacing="1" cellpadding="1" border="1" width="50%"
|-
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|-
|rowspan=2|Hello
| Hello
| Hello
| Hello
| Hello
|-
| Greetings
| Greetings
| Greetings
|}
Yields this:
| Hi | Hi | Hi | Hi | Hi |
| Hello | Hello | Hello | Hello | Hello |
| Greetings | Greetings | Greetings |
When rowspan is used, the coding "valign="top" can be used to make the text align itself to the top of the field.
{| cellspacing="1" cellpadding="1" border="1" width="50%"
|-
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|-
|rowspan=2 valign="top"|Hello
| Hello
| Hello
| Hello
| Hello
|-
| Greetings
| Greetings
| Greetings
| Greetings
|}
Yields this:
| Hi | Hi | Hi | Hi | Hi |
| Hello | Hello | Hello | Hello | Hello |
| Greetings | Greetings | Greetings | Greetings |
You can combine colspan and rowspan to various effects, and many of the Wiki's more complex tables do so - for example, List of Super Mario World Items. However, this can get quite complicated - remember to preview your table before saving it to make sure it looks right!
{| cellspacing="1" cellpadding="1" border="1" width="50%"
|-
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|-
|rowspan=2|Hello
|colspan=3|Hello
|rowspan=2|Hello
|-
| Greetings
| Greetings
| Greetings
| Greetings
|}
Yields this:
| Hi | Hi | Hi | Hi | Hi |
| Hello | Hello | Hello | ||
| Greetings | Greetings | Greetings | ||
Note that colspan and rowspan expand their fields right and down, respectively. If we were to put "rowspan=3" in the above table, the field would not expand into the "Hi" fields at the top, they would instead stretch the table down. To get that effect we would have to move the rowspan coding to the "Hi" fields like so:
{| cellspacing="1" cellpadding="1" border="1" width="50%"
|-
|width=20% rowspan=3|Hi
|width=20%|Hi
|width=20%|Hi
|width=20%|Hi
|width=20% rowspan=3|Hi
|-
|colspan=3|Hello
|-
| Greetings
| Greetings
| Greetings
|}
Yields this:
| Hi | Hi | Hi | Hi | Hi |
| Hello | ||||
| Greetings | Greetings | Greetings | ||
The preferred method of formatting in the Wiki is as follows. Note that "class=SMB1A" should be replaced with whatever class coding is to be used for whatever game you're using the table for, such as "class=SM64" for tables related to Super Mario 64. As before, a full list of class coloring codes can be found here.
{|border="1" cellspacing="0" cellpadding="2" width="100%"
|- class=SMB1A
!Sprite
!Name
!Points
|-
!class=SMB1B|[[File:Goomba SMB.png]]
|align="center"|Goomba
|100
|-
|}
