Difference between revisions of "Help:Tables"

Revision as of 21:20, 27 November 2012 (view source) J McKalling (Talk | contribs) m ← Older edit		Latest revision as of 12:12, 8 December 2012 (view source) J McKalling (Talk | contribs) m
Line 178:		Line 178:
	* [http://www.uni-bonn.de/~manfear/html2wiki-tables.php A tool that converts HTML tables to Wiki source] - useful if you are still uncomfortable with the Wiki code.		* [http://www.uni-bonn.de/~manfear/html2wiki-tables.php A tool that converts HTML tables to Wiki source] - useful if you are still uncomfortable with the Wiki code.
	* [http://meta.wikimedia.org/w/index.php?title=Help:Table The official WikiMedia Table helppage] - for the more advanced Wiki editors among us.		* [http://meta.wikimedia.org/w/index.php?title=Help:Table The official WikiMedia Table helppage] - for the more advanced Wiki editors among us.
−
−	[[Category:Twinsuniverse - Help]]

---

Latest revision as of 12:12, 8 December 2012

Help Contents
Categories Disambiguation page Editing Group rights Headlines Images Links Lists New articles Redirect pages Tables of contents Tables Templates Variables

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:

{| → 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:

Heading

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.