Introduction
Tables are another useful feature of MediaWiki and have a simpler, if not a bit more clumsy, syntax than their html equivalent. Personally I think this syntax is a bit strange and think it could have been made easier to use.
Creating tables
You define a table in MediaWiki by using a combination of the curly brace and a pipe character, so that is the combination “{|” to start the table and “|}” to end it. The tables contents lie between these two “tags” similar to the html <table> and </table> tags familiar from html. However, it is important to note that both the starting and ending brace/pipe combination must reside on their own separate line and no other tags apart from any table attributes may exist on those two lines.
Creating columns
You start a new column by simply using a single pipe character at the beginning of a new line. You must also remember to do this for the first row after the table definition. You can also define many columns on a single line, but then you will have to use a double pipe character sequence for that. The example later will clear things up.
Creating rows
You start a new table row using a combination of the pipe and dash characters “|-” at the beginning of a new line. As in html, each row must have the same amount of columns as the last and any empty column cells must be populated with a html space entity tag.
So all of this may sound a bit technical. So lets look at a simple table example using a few of the things we’ve just mentioned:
{|
| 1A
| 1B
| 1C
|-
| 2A
| & nbsp;
| 2C
|-
| 3A || 3B || 3C
|}
would give the following output:
Pretty basic stuff, but the syntax can get a bit untidy. Unfortunately it actually gets worse.
Adding a column header
By replacing the pipe character with an exclamation you define a table column header, so:
{|
! col1
! col2
! col3
|-
| 1A
| 1B
| 1C
|-
| 2A
| & nbsp;
| 2C
|-
| 3A || 3B || 3C
|}
gives something that should like:
Notice the bold header at the top of each column.
Adding a row header
You can also do something similar for rows, so
{|
! —
! col1
! col2
! col3
|-
! row1
| 1A
| 1B
| 1C
|-
! row2
| 2A
| & nbsp;
| 2C
|-
! row3
| 3A
| 3B
| 3C
|}
gives a row header on each row, like
Adding table attributes
The table syntax supports most table parameters familiar from html tables using a style tag. However, this is a bit of a mess as we will see in the next example. I am not a fan of mixing CSS styles with wiki syntax, but if you want them to look good then that’s what you have to do. Since these are not html tags then you can’t use a general stylesheet, but must style each element using the style attribute.
{| style=”background:red;color:black;width:50%;” border=”1″ cellpadding=”5″ cellspacing=”0″ |
! —
! col1
! col2
! col3
|- style=”background:white; color:blue”
! row1
| 1A
| 1B
| 1C
|- style=”background:white; color: blue”
! row2
| 2A
| & nbsp;
| 2C
|- style=”background:white; color:blue”
! row3
| 3A
| 3B
| 3C
|}
Gives the following output:
