Difference between revisions of "Help:How to make tables"
Line 584: | Line 584: | ||
|Buzzard's Roost | |Buzzard's Roost | ||
|8 | |8 | ||
+ | |} | ||
+ | |} | ||
+ | ==Attributes on cells== | ||
+ | You can add attributes to individual cells by adding the attibute after the | for that cell and after that putting another | before the content of that cell. | ||
+ | {|width="100%" | ||
+ | !You type | ||
+ | !You get | ||
+ | |- | ||
+ | |width="50%"| | ||
+ | <pre> | ||
+ | {|border="1" | ||
+ | !Cabin | ||
+ | !Campers | ||
+ | |- | ||
+ | |align="right"|Cabin 1 | ||
+ | |align="center"|4 | ||
+ | |- | ||
+ | |style="color:green;"|Cabin 6 | ||
+ | |4 | ||
+ | |- | ||
+ | |Eagle's Nest | ||
+ | |8 | ||
+ | |- | ||
+ | |Buzzard's Roost | ||
+ | |style="background-color:purple;color:yellow;"|8 | ||
+ | |} | ||
+ | </pre> | ||
+ | |width="50%"| | ||
+ | {|border="1" | ||
+ | !Cabin | ||
+ | !Campers | ||
+ | |- | ||
+ | |align="right"|Cabin 1 | ||
+ | |align="center"|4 | ||
+ | |- | ||
+ | |style="color:green;"|Cabin 6 | ||
+ | |4 | ||
+ | |- | ||
+ | |Eagle's Nest | ||
+ | |8 | ||
+ | |- | ||
+ | |Buzzard's Roost | ||
+ | |style="background-color:purple;color:yellow;"|8 | ||
|} | |} | ||
|} | |} |
Revision as of 13:21, 20 January 2008
Tables can help you put a lot of information in to a concentrated space. They are a little bit difficult to make so only read this if you are already farmiliar with how text formatting works. To start a table make a line with just {| and nothing else. On the next line put a | which means you are making a cell in the first row and put the contents of that cell on the rest of the line. On the next line put an other | and the contents of the second cell. Make as many cells in a row as you want using more lines starting with|. To start the second row put |- on the next line to signify a new row. Think of it as making a table row by row. To finish the table make a line at the end with |}. Below you can see an example of what you would type to make a table and what it makes in the article.
Contents
A simple table
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{| |''Cabin'' |''Number of campers'' |- |Cabin 1 |4 |- |Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |8 |} |
|
Simple tables should really only be used for making tables that you do not want people to see are infact tables. For example, to make the before and after thing above I actually used a table with headers on the columns and two cells. I put the code block of what you type in one cell and put the output table in the second cell (you can put tables inside table cells). Using a table was the only way I could have made it look like that. Tables can give you a lot of control over your page.
Borders
To make a border around your table and little borders around your cells you place a border attibute in the first line of the table after the {| like this {|border="1". You can see an example of this below.
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|border="1" |''Cabin'' |''Campers'' |- |Cabin 1 |4 |- |Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |8 |} |
|
Headers
You can make headers to rows or columns of a table by using !. If you use headers on columns you must have a |- line after them because headers are pretty much just a special row. Headers are bold and are centered in their cell.
Headers on columns
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|border="1" !Cabin !Campers |- |Cabin 1 |4 |- |Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |8 |} |
|
Headers on rows
You type | You get | ||||||||
---|---|---|---|---|---|---|---|---|---|
{|border="1" !Name |Adric Allie |Will Brewster |Teddy Brown |- !Seal time |1:28 |1:48 |1:32 |} |
|
Attributes on headers
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|border="1" !align="right" style="color:green;"|Cabin !style="background-color:black;color:white"|Campers |- |Cabin 1 |4 |- |Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |8 |} |
|
Justification
You can make a table appear on the right or middle of a page by using the align attribute like this: {|align="right". You can also set it to "center". If you want to make the table be in the center and have it have a border you can add multiple attributes to it like this: {|align="right" border="1". Below you can see some examples.
Right
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|align="right" border="1" !Cabin !Campers |- |Cabin 1 |4 |- |Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |8 |} |
|
Center
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|align="center" border="1" !Cabin !Campers |- |Cabin 1 |4 |- |Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |8 |} |
|
Captions
You can caption a table by adding an extra line after the first line. This line is started with |+ and then after that you put the caption.
On the top of the table
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|border="1" |+Some Birch Rock cabins !Cabin !Campers |- |Cabin 1 |4 |- |Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |8 |} |
|
You can put some attributes on captions by adding the attribute after the |+ and putting another | after the attribute like this.
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|border="1" |+align="bottom" style="color:red"|Some Birch Rock cabins !Cabin !Campers |- |Cabin 1 |4 |- |Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |8 |} |
|
Colors
You can make the text and border of a table a different color and the background a different color with the style attribute. After the {| in the first line you can add style="color:green;background-color:blue;", for example, to make the text and borders green and the backround blue. To change just the text color find how on the text formatting page. Below you can see some of the available colors.
Red | |
Green | |
Yellow | |
Blue | |
Orange | |
Purple | |
Gray | |
Maroon | |
Crimson |
Change the text and border color
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|border="1" style="color:green;" !Cabin !Campers |- |Cabin 1 |4 |- |Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |8 |} |
|
Change the background color
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|border="1" style="background-color:blue;" !Cabin !Campers |- |Cabin 1 |4 |- |Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |8 |} |
|
Change both the text and border color and the background color
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|border="1" style="color:white;background-color:black;" !Cabin !Campers |- |Cabin 1 |4 |- |Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |8 |} |
|
Attributes on rows
You can add attributes to a single row in a table by adding them after the |- that started that row.
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|border="1" !Cabin !Campers |-align="right" |Cabin 1 |4 |-style="color:green;" |Cabin 6 |4 |-align="center" |Eagle's Nest |8 |-style="background-color:purple;color:yellow;" |Buzzard's Roost |8 |} |
|
Attributes on cells
You can add attributes to individual cells by adding the attibute after the | for that cell and after that putting another | before the content of that cell.
You type | You get | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
{|border="1" !Cabin !Campers |- |align="right"|Cabin 1 |align="center"|4 |- |style="color:green;"|Cabin 6 |4 |- |Eagle's Nest |8 |- |Buzzard's Roost |style="background-color:purple;color:yellow;"|8 |} |
|