Difference between revisions of "Help:Tables"

From Twinsuniverse
Jump to: navigation, search
m (1 revision)
m
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{Help}}
+
{{Infobox Help}}There are special codes for creating tables, which could be useful for displaying something in columns and rows. While this might seem a little inconvenient at start, it only takes a little time to get used to. There are just a few basic codes required to create a table:
  
−
MediaWiki has its own special codes for creating tables. While this might seem a little inconvenient at start, it only takes a little time to get used to. There are four basic codes required to create a table:
+
:'''<code>{|</code>''' &rarr; New table
 +
:'''<code>|+</code>''' &rarr; Table caption (optional)
 +
:'''<code>|-</code>''' &rarr; New row
 +
:'''<code>!</code>''' &rarr; New header cell
 +
:'''<code>|</code>''' &rarr; New normal cell
 +
:'''<code>|}</code>''' &rarr; End table
  
−
* '''{|''' - New table
 
−
* '''|''' - New column
 
−
* '''|-''' - New row
 
−
* '''|}''' - End table
 
  
 
==Creating a simple table==
 
==Creating a simple table==
 
The following guide explains how to create a simple table, which looks like the one below:
 
The following guide explains how to create a simple table, which looks like the one below:
−
{| border=1  
+
{| border="1" cellspacing="0" cellpadding="3"
 
|+ Heading
 
|+ Heading
 
! Column A !! Column B !! Column C
 
! Column A !! Column B !! Column C
Line 21: Line 22:
 
|}
 
|}
  
−
We will first create the beginning and the end of the table:
+
We will start with creating the beginning and the end of the table:
−
<pre>{|
+
<span style="font-weight:bold; color:red"><nowiki>{|</nowiki></span>
−
Table body
+
  ''Table body''
−
|}</pre>
+
<span style="font-weight:bold; color:red"><nowiki>|}</nowiki></span>
  
 
We'll now add the heading of the table. This is done using |+, followed by a space and then the heading:
 
We'll now add the heading of the table. This is done using |+, followed by a space and then the heading:
−
<pre>{|
+
<nowiki>{|</nowiki>
−
|+ Heading
+
<span style="font-weight:bold; color:red"><nowiki>|+</nowiki> ''Heading''</span>
−
Table body
+
  ''Table body''
−
|}</pre>
+
<nowiki>|}</nowiki>
  
 
We will now create the rows. This is done using the |- signs. Since we have 3 rows, we are going to use these signs 3 times:
 
We will now create the rows. This is done using the |- signs. Since we have 3 rows, we are going to use these signs 3 times:
−
<pre>{|
+
<nowiki>{|</nowiki>
−
|+ Heading
+
<nowiki>|+</nowiki> Heading
−
|-
+
<span style="font-weight:bold; color:red"><nowiki>|-</nowiki></span>
−
First row here
+
  ''first row here''
−
|-
+
<span style="font-weight:bold; color:red"><nowiki>|-</nowiki></span>
−
Second row here
+
  ''second row here''
−
|-
+
<span style="font-weight:bold; color:red"><nowiki>|-</nowiki></span>
−
Third row here
+
  ''third row here''
−
|}</pre>
+
<nowiki>|}</nowiki>
  
−
Let's now create the first row of the table. As this is the heading row, we'll use the ! sign, to make the text '''bold''':
+
Let's now create the first row of the table. As this is the heading row, we'll use the ! sign, to make a header cell, which appears '''bold''':
−
<pre>{|
+
<nowiki>{|</nowiki>
−
|+ Heading
+
<nowiki>|+</nowiki> Heading
−
|-
+
<nowiki>|-</nowiki>
−
! Column A !! Column B !! Column C
+
<span style="font-weight:bold; color:red">! Column A !! Column B !! Column C</span>
−
|-
+
<nowiki>|-</nowiki>
−
Second row here
+
  ''second row here''
−
|-
+
<nowiki>|-</nowiki>
−
Third row here
+
  ''third row here''
−
|}</pre>
+
<nowiki>|}</nowiki>
−
Notice how one ! is used at the beginning of the line, while two exclamation marks are used separate rows.
+
Notice how a double exclamation mark is used to separate different header cells that are on the same line. Cells on the same "row" don't have to be written on the same line though, more about that later.
  
 
Now we know how to create a table row, and we are going to add the contents to the next rows:
 
Now we know how to create a table row, and we are going to add the contents to the next rows:
−
<pre>{|
+
<nowiki>{|</nowiki>
−
|+ Heading
+
<nowiki>|+</nowiki> Heading
−
|-
+
<nowiki>|-</nowiki>
−
! Column A !! Column B !! Column C
+
! Column A !! Column B !! Column C
−
|-
+
<nowiki>|-</nowiki>
−
! Row 2 || 2B || 2C
+
<span style="font-weight:bold; color:red">! Row 2 || 2B || 2C</span>
−
|-
+
<nowiki>|-</nowiki>
−
! Row 3 || 3B || 3C
+
<span style="font-weight:bold; color:red">! Row 3 || 3B || 3C</span>
−
|}</pre>
+
<nowiki>|}</nowiki>
 +
Notice how only the first cell of each row has an exclamation sign. Normal cells which are indicated by pipe signs, may be mixed with header cells on the same row.
 +
 
 +
The table is almost complete. Now all we need is to add a border. This is done using "border=#" at the top of the table, similar to HTML. We'll also throw in some cellspacing and cellpadding for the finishing touch.
 +
<nowiki>{|</nowiki> <span style="font-weight:bold; color:red">border="1" cellspacing="0" cellpadding="3"</span>
 +
<nowiki>|+</nowiki> Heading
 +
<nowiki>|-</nowiki>
 +
! Column A !! Column B !! Column C
 +
<nowiki>|-</nowiki>
 +
! Row 2 || 2B || 2C
 +
<nowiki>|-</nowiki>
 +
! Row 3 || 3B || 3C
 +
<nowiki>|}</nowiki>
 +
The final result is the table above.
 +
 
 +
As an advanced alternative for styling your table, any style can be applied to a table, row or cell using the '''style''' attribute instead. This attribute takes common inline CSS style statements ([http://www.w3schools.com/css/default.asp CSS tutorial]).
  
−
The table is almost complete. Now all we need is to add a border. This is done using "border=#" at the top of the table, similar to HTML.
+
==Cells on new line?==
 +
As mentioned earlier, cells or header cells could be written on new lines as well. This does change the code a bit, so the table example could also be created by the following code:
 +
<nowiki>{|</nowiki> border="1" cellspacing="0" cellpadding="3"
 +
<nowiki>|+</nowiki> Heading
 +
<nowiki>|-</nowiki>
 +
<span style="font-weight:bold; color:red">!</span> Column A
 +
<span style="font-weight:bold; color:red">!</span> Column B
 +
<span style="font-weight:bold; color:red">!</span> Column C
 +
<nowiki>|-</nowiki>
 +
<span style="font-weight:bold; color:red">!</span> Row 2
 +
<span style="font-weight:bold; color:red">|</span> 2B
 +
<span style="font-weight:bold; color:red">|</span> 2C
 +
<nowiki>|-</nowiki>
 +
<span style="font-weight:bold; color:red">!</span> Row 3
 +
<span style="font-weight:bold; color:red">|</span> 3B
 +
<span style="font-weight:bold; color:red">|</span> 3C
 +
<nowiki>|}</nowiki>
 +
If the cells get too long to fit on a line, this would be more convenient. Notice how the double exclamation sign or double pipe signs are now not required anymore.
  
−
<pre>{| border=1
+
==Cell attributes==
−
|+ Heading
+
As with the tabel itself, cells can have attributes as well. This is done by putting the cell on it's own line, and then by specifying any attribute(s) before a single pipe sign before the content:
 +
<nowiki>{|</nowiki> border="1" cellspacing="0" cellpadding="3"
 +
<nowiki>|-</nowiki>
 +
<nowiki>!</nowiki> <span style="font-weight:bold; color:red">align="right" colspan="3" |</span> Heading right
 +
<nowiki>|-</nowiki>
 +
| <span style="font-weight:bold; color:red">style="color:green" |</span> Cell left
 +
| Cell middle || Cell right
 +
<nowiki>|}</nowiki>
 +
Notice for both header cells and normal cells a pipe sign is used to separate attributes from content.
 +
 
 +
{| border="1" cellspacing="0" cellpadding="3"
 
|-
 
|-
−
! Column A !! Column B !! Column C
+
! align="right" colspan="3" | Heading right
 
|-
 
|-
−
! Row 2 || 2B || 2C
+
| style="color:green" | Cell left
−
|-
+
| Cell middle || Cell right
−
! Row 3 || 3B || 3C
+
|}
−
|}</pre>
+
−
The final result is as shown above.
+
  
 
==Comparing to HTML==
 
==Comparing to HTML==
 
If you are familiar with HTML tables, you'll probably find the following table useful:
 
If you are familiar with HTML tables, you'll probably find the following table useful:
  
−
{| border=1
+
{| border="1" cellspacing="0" cellpadding="3"
 
|-
 
|-
 
! Command !! MediaWiki !! HTML
 
! Command !! MediaWiki !! HTML
Line 95: Line 136:
 
|-
 
|-
 
! colspan="3" | Optional control characters
 
! colspan="3" | Optional control characters
 +
|-
 +
| Table heading || <nowiki>|+</nowiki> || <nowiki><caption></caption></nowiki>
 
|-
 
|-
 
| New Heading cell || <nowiki>!</nowiki> || <nowiki><th></th></nowiki>
 
| New Heading cell || <nowiki>!</nowiki> || <nowiki><th></th></nowiki>
Line 101: Line 144:
 
|-
 
|-
 
| New cell in the middle of a row || <nowiki>||</nowiki> || <nowiki><td></td></nowiki>
 
| New cell in the middle of a row || <nowiki>||</nowiki> || <nowiki><td></td></nowiki>
−
|-
 
−
| Table heading || <nowiki>|+</nowiki> || <nowiki><caption></caption></nowiki>
 
 
|-
 
|-
 
|}
 
|}
Line 109: Line 150:
 
There are a few parameters available for designing tables. Attributes of the entire table should be added in the first line of the table.
 
There are a few parameters available for designing tables. Attributes of the entire table should be added in the first line of the table.
  
−
{| border=1
+
{| border="1" cellspacing="0" cellpadding="3"
 
|-
 
|-
 
! Feature !! Attribute !! Example !! Applies to
 
! Feature !! Attribute !! Example !! Applies to
Line 135: Line 176:
  
 
==External links==
 
==External links==
−
[http://www.uni-bonn.de/~manfear/html2wiki-tables.php A tool that converts HTML tables to Wiki source] - useful if you are still uncomfortable with the Wiki code.
+
* [http://www.uni-bonn.de/~manfear/html2wiki-tables.php A tool that converts HTML tables to Wiki source] - useful if you are still uncomfortable with the Wiki code.
−
 
+
* [http://meta.wikimedia.org/w/index.php?title=Help:Table The official WikiMedia Table helppage] - for the more advanced Wiki editors among us.
−
[[Category:Twinsunica - Help|Tables]]
+

Latest revision as of 12:12, 8 December 2012

Help Contents
There are special codes for creating tables, which could be useful for displaying something in columns and rows. While this might seem a little inconvenient at start, it only takes a little time to get used to. There are just a few basic codes required to create a table:
{| → New table
|+ → Table caption (optional)
|- → New row
! → New header cell
| → New normal cell
|} → End table


Creating a simple table

The following guide explains how to create a simple table, which looks like the one below:

Heading
Column A Column B Column C
Row 2 2B 2C
Row 3 3B 3C

We will start with creating the beginning and the end of the table: 

{|
  Table body
|}

We'll now add the heading of the table. This is done using |+, followed by a space and then the heading: 

{|
|+ Heading
  Table body
|}

We will now create the rows. This is done using the |- signs. Since we have 3 rows, we are going to use these signs 3 times: 

{|
|+ Heading
|-
  first row here
|-
  second row here
|-
  third row here
|}

Let's now create the first row of the table. As this is the heading row, we'll use the ! sign, to make a header cell, which appears bold: 

{|
|+ Heading
|-
! Column A !! Column B !! Column C
|-
  second row here
|-
  third row here
|}

Notice how a double exclamation mark is used to separate different header cells that are on the same line. Cells on the same "row" don't have to be written on the same line though, more about that later.

Now we know how to create a table row, and we are going to add the contents to the next rows: 

{|
|+ Heading
|-
! Column A !! Column B !! Column C
|-
! Row 2 || 2B || 2C
|-
! Row 3 || 3B || 3C
|}

Notice how only the first cell of each row has an exclamation sign. Normal cells which are indicated by pipe signs, may be mixed with header cells on the same row.

The table is almost complete. Now all we need is to add a border. This is done using "border=#" at the top of the table, similar to HTML. We'll also throw in some cellspacing and cellpadding for the finishing touch. 

{| border="1" cellspacing="0" cellpadding="3"
|+ Heading
|-
! Column A !! Column B !! Column C
|-
! Row 2 || 2B || 2C
|-
! Row 3 || 3B || 3C
|}

The final result is the table above.

As an advanced alternative for styling your table, any style can be applied to a table, row or cell using the style attribute instead. This attribute takes common inline CSS style statements (CSS tutorial).

Cells on new line?

As mentioned earlier, cells or header cells could be written on new lines as well. This does change the code a bit, so the table example could also be created by the following code: 

{| border="1" cellspacing="0" cellpadding="3"
|+ Heading
|-
! Column A
! Column B
! Column C
|-
! Row 2
| 2B
| 2C
|-
! Row 3
| 3B
| 3C
|}

If the cells get too long to fit on a line, this would be more convenient. Notice how the double exclamation sign or double pipe signs are now not required anymore.

Cell attributes

As with the tabel itself, cells can have attributes as well. This is done by putting the cell on it's own line, and then by specifying any attribute(s) before a single pipe sign before the content: 

{| border="1" cellspacing="0" cellpadding="3"
|-
! align="right" colspan="3" | Heading right
|-
| style="color:green" | Cell left
| Cell middle || Cell right
|}

Notice for both header cells and normal cells a pipe sign is used to separate attributes from content.

Heading right
Cell left Cell middle Cell right

Comparing to HTML

If you are familiar with HTML tables, you'll probably find the following table useful:

Command MediaWiki HTML
New table {- <table>
New row |- <tr></tr>
New cell | <td></td>
End of table |} </table>
Optional control characters
Table heading |+ <caption></caption>
New Heading cell ! <th></th>
New heading cell in the middle of a row !! <th></th>
New cell in the middle of a row || <td></td>

Table parameters

There are a few parameters available for designing tables. Attributes of the entire table should be added in the first line of the table.

Feature Attribute Example Applies to
Background color bgcolor bgcolor="#ABCDEF" Table, row, cell
Horizontal alignment align align="center" Table, row, cell
Vertical alignment valign valign="top" Row
Border width border border="6" Table
Space outside the cell cellspacing cellspacing="8" Table
Space around the text cellpadding cellpadding="2" Table
A cell extending several columns colspan colspan="2" Cell
A cell extending several rows rowspan rowspan="4" Cell
Constant width in pixels width width="400px" Table, cell
Constant width in percentages width width="50%" Table, row

External links

Retrieved from "https://twinsuniverse.xesf.net/index.php?title=Help:Tables&oldid=3475"