Difference between revisions of "Help:Tables"

Revision as of 23:42, 31 October 2012

Template:HelpThere are special codes for creating tables, which could be useful for displaying something in columns and rows. These codes might seem a little inconvenient at start, but it only takes 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:

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.

Comparing to HTML

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

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.

External links

• A tool that converts HTML tables to Wiki source - useful if you are still uncomfortable with the Wiki code.
• The official WikiMedia Table helppage - for the more advanced Wiki editors among us.