Help:Tables

From Twinsuniverse
Revision as of 21:55, 23 October 2012 by Kbadmin (Talk | contribs)

Jump to: navigation, search

Template:Help

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:

  • {| - New table
  • | - New column
  • |- - New row
  • |} - 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 first create 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 the text bold:

{|
|+ Heading
|-
! Column A !! Column B !! Column C
|-
 Second row here
|-
 Third row here
|}

Notice how one ! is used at the beginning of the line, while two exclamation marks are used separate rows.

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
|}

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.

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

The final result is as shown above.

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
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 heading |+ <caption></caption>

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

A tool that converts HTML tables to Wiki source - useful if you are still uncomfortable with the Wiki code.