Help:Tables
This article is a stub [list all]. You can help the Twinsuniverse by expanding it. |
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:
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.