FANDOM


SummaryEdit

This guide aims to explain how to use templates and tables together and define the difference between them. A basic level of wiki knowledge is expected (such as bolding ect). By the end you should be able to make a template similar to a flagbox as show in the Making Templates guide.

DefinitionsEdit

Most people (including me the Author) commonly confuse the definitions of templates and tables together. Most people think that the colour boxes with pictures are templates. Although they can be templates they are usually comprised of tables. A template can also just be a long list of text. Specifically this will be looking at tables to produce something that looks like this.

Star Templates and Tables
This user knows the difference between templates and tables.

TemplatesEdit

A template is best defined as something which can be called so that people don't have to keep typing in the same code over and over again. Different values can be passed into templates to change their appearance or other aspects about them. A template could even just be something which returns the value which is passed into it. However this would not be very useful in most cases.

TablesEdit

A table consists of rows and columns. Each table has what is called a cell, you can place whatever you want inside these cells. The best way to explain a table is to show it.

This is the first cell. This table is constructed of many cells.
This is another cell. However this tutorial will show a better way of constructing tables for typical template purposes.

Getting startedEdit

Ok, the first thing you need to know is how to open a table, it's quite simple. It starts off with a

{|

Now that wasn't too hard was it? So now we want to start a new row, well thats simple as well.

{|
|-

But rows are useless without cells, so we should add in a few cells.

{|
|-
| Your information goes here for the first cell
| Some more for you second cell.
| And so on.

More |'s can be added to insert more cells and more |-'s can be added to create more rows. Once you are done you finnish with a |} to get

{|
|-
| Your information goes here for the first cell
| Some more for you second cell.
| And so on.
|}

Your information goes here for the first cell Some more for you second cell. And so on.

As you would have noticed this table is lacking borders so we will want to set one to it. There are many ways of doing this, however while we are getting the concept of tables down we shall use the simple way. All we do is add in border="1" and get

{| border="1"
|-
| Your information goes here for the first cell
| Some more for you second cell.
| And so on.
|}

Your information goes here for the first cell Some more for you second cell. And so on.

That is much nicer. Experiment with this basic principal of rows and columns before continuing on.

StylesEdit

A style is an atribute for a table, row or cell that determines the apperance of it. There are many values that can be assigned, however this will only look at a few of them.

The first thing that needs to be learned is how to assign a style to a cell/row/table. Lets take for example the background colour of a cell. We'll first create our table using the following code.

{|
|-
| row one cell one
| row one cell two
| row one cell three
|-
| row two cell one
| row two cell two
| row two cell three
|}
row one cell one row one cell two row one cell three
row two cell one row two cell two row two cell three

It currently looks like any other table at the moment, however we can change the colours by specifying the style before a cell. This is done by adding in a section (similar to adding in another cell) with the information of style="background-color: #F00" (Note, colours are specified by #RGB where RGB are the Red, Green, Blue values in hexadecimal)

{|
|-
| style="background-color: #F00" | row one cell one
| row one cell two
| style="background-color: #0F0" | row one cell three
|-
| row two cell one
| style="background-color: #00F" | row two cell two
| row two cell three
|}

(Extra colours added in for display purposes)

row one cell one row one cell two row one cell three
row two cell one row two cell two row two cell three

So what happens when we want to add in width as well as colour. Well thats simple, after each value you assign you add in a semi-colon (;). So if you wanted to specify the width and colour you would have style="background-color: #888; width=200px". So in this example we have lets assign the styles to the whole table and individual rows as well as cells.

{| style="width=200px; background-color: #707"
|- style="background-color: #077"
| style="background-color: #F00" | row one cell one
| row one cell two
| style="background-color: #0F0" | row one cell three
|-
| row two cell one
| style="background-color: #00F" | row two cell two
| row two cell three
|}
row one cell one row one cell two row one cell three
row two cell one row two cell two row two cell three

As you can see the whole table is purple, however all of the cells which have not been asigned a colour in the first row have the value of #077.

List of style variablesEdit

This is a list of useful general purpose style variables. Note - There are many more, however for the purpose of this tutorial these are the main ones we will look at.

Variable Name Explanation Usage Example Valid Variables
border The border variable controls what the border looks like, it's colour, it's style. border: border-style width-px #colour border: solid 2px #F0F For border-style
  • Solid
background-color The background colour variable controls what the background colour is. background-color: #colour background-color: #0AA N/A
color The colour variable controls the font colour. color: #colour color:#F00 N/A
width The width variable controls how wide the cell/column/table is. The column will stretch out to it's widest cell. width: x% width: 15% The width can also be in pixles (formated as x px)
height The hight variable controls how wide the cell/row/table is. The row will stretch out to it's highest cell. height: x% height:100px The height can also be in pixles (formated as x%)
text-align The text-align veriable controls how the text is aligned. text-align:position text-align:right Position
  • left
  • right
  • center

Other VariablesEdit

There are a few other useful variables which are seperate to the style variables. They are used in a similar way to the style variables, however there are subtle differences that you must take into consideration.

The first is to remember that we don't use to use semi-colons (;) in order to seperate the variables. All that is needed is a space. For example.

{| border="2px" style="width:50px"

The second is to remember how to lay them out. This is similar to the same style as the style variables, however you use an equals sign instead of a colon (:) to set the variables, and the variables are outside of the style="variabels" statement.

To help us create the table that we saw initaly we need to make use of the variable rowspan. Lets take a similar example to our example with colours before.

row one cell one row one cell two row one cell three
row two cell one row two cell two row two cell three

Currently as it is each cell spans only over one row and one column. However by adding rowspan to a cell we are able to make the cell taller.

{| border="1"
|- 
| rowspan=2 | row one cell one
| row one cell two
| style="background-color: #0F0" | row one cell three
|-
| row two cell one
| style="background-color: #00F" | row two cell two
| row two cell three
|}
row one cell one row one cell two row one cell three
row two cell one row two cell two row two cell three

As you can see from this example by still using three cells in the 2nd row it has pushed them to the side. When you are making tables and using rowspan you must leave out the corresponding cell in the rows below which the cell spans onto. As of such you would want something more along the lines of this as it's less messy and looks nicer.

{| border="1"
|- 
| rowspan=2 | row one and two cell one
| row one cell two
| style="background-color: #0F0" | row one cell three
|-
| style="background-color: #00F" | row two cell two
| row two cell three
|}
row one and two cell one row one cell two row one cell three
row two cell two row two cell three

Using these basic principals you should be able to, or at least very close to constructing a table similar to the one a the top of this page. Practice using rowspan until you are familiar with it and the continue on.

List of Other variablesEdit

These variables can be applied to either individual cells, rows or even tables unless specifically stated otherwise. Note - There are many more, however for the purpose of this tutorial these are the main ones we will look at.

Variable Name Explanation Usage Example Valid Variables
border This sets the borders width. This is table only. border="x" N/A N/A
rowspan This variable sets how many rows the cell spans over. rowspan=x N/A N/A
colspan This variable sets how many columns the cell spans over. colspan=x N/A N/A
align This variable sets which position the table/cell is aligned in. align="position" align="right" Position
  • left
  • right
  • center
vertical-align This variable sets how the table/cell aligns verticaly. valign="position" valign="top" Position
  • top
  • bottom
  • center

Using imagesEdit

This is one of the most important parts in making a table which is aesthetically pleasing, the images. And they are very simple as well. Once you have uploaded your image or found your image on the wiki all you have to do is link it just like any other page.

However you may want to make your image smaller, thats alright. This is how we do it. Say we have our image Star.gif. If we used the image just as it is it would be way to large to use in a table nicely. So we would like to resize it so it's smaller. All we do is add to it a |x px]] to the end of it. That would make the code look like this.

[[Image:Star.gif|50px]]

Star

And thats all there is to it. A simple but effective technique that can be used to help make things look nicer.

Passing values into templatesEdit

The last thing that you need to know about templates is how to pass values into them. First in our template we define our values. We can do this in one of two ways. The first is by using an incremental number, the second is by giving the variable a name. These values are defined using {{{Name/Number here}}}.

Ok, thats simple enough, a simple templates code could look like this.

This is a template, from what I've been told your name is {{{name}}

Alternitvaly it could also look like this.

This is a template, from what I've been told your name is {{{1}}}

Both of these are valid, however the useage when calling them are very different, but are just as easy. When you call your template if you are using a named variable you do it in the following way. Note the vertical line (|), this is important for seperating the variables.

{{Your templates page name
|Variable One=The first value 
|Variable Two=The second value...
}}

When using an un-named variable. You don't include the variable name or the equals sign, however the vertical line (|) is still important.

{{Your templates page name
|The first value
|The second value
|...
}}


Making that inital tableEdit

Here is the challanging part, I want you to make a table which looks exactly like the first one shown. Everything you need to know is in this tutorial and if you have been practicing during it then you should be able to it.

Once you can do that you have completed this tutorial.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.