Difference between revisions of "Help:Tables"
J McKalling (Talk | contribs) m |
J McKalling (Talk | contribs) m |
||
| Line 1: | Line 1: | ||
| − | {{Infobox Help}}There are special codes for creating tables, which could be useful for displaying something in columns and rows. | + | {{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: |
:'''<code>{|</code>''' → New table | :'''<code>{|</code>''' → New table | ||
Revision as of 21:20, 27 November 2012
| Help Contents | |
|---|---|
{|→ New table|+→ Table caption (optional)|-→ New row!→ New header cell|→ New normal cell|}→ End table
Contents
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 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
- 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.
