Help:Tables

In wikitext

Worthless table

Writing...

{| 
| A
| B
| C
|- 
| D
| E
| F
|-
| G
| H
| I
|}

produces:

A	B	C
D	E	F
G	H	I

You can also write...

{| 
| A || B || C
|- 
| D || E || F
|-
| G || H || I
|}

for the same result.

Slightly proficient table

Note: Separate class=" " from style=" " with whitespace ( ); not commas (,), semicolons (;), periods (.) nor anything else.

You can add style="<attributes>" to the start of a table, like...

{|class="wikitable" style="text-align:center"
|+POOPtitle
|-
! X !! A !! A !! A
|-
! B
| A || A || A
|-
! B
| A || A || A
|-
! B
| A || A || A
|-
! B
| A || A || A
|-
! B
| A || A || A
|} 

creates...

POOPtitle

X	A	A	A
B	A	A	A
B	A	A	A
B	A	A	A
B	A	A	A
B	A	A	A

Note: Starting a row with an exclamation mark (!) designates the whole row as a header, regardless if you later separate it with double pipes (||) or double exclamation marks (!!). If you want only the first cell of your table to be like a header, press "enter" to shift it to the next line and use (!) there.

Another slightly proficient table

Note: The attribute border=" " does not work for class="wikitable". Also notice that border=" " is separate from style=" ", outside the quotation marks (" ").

Writing...

{| style="width:75%; height:200px" border="1"
|- 
| A || B || C
|- style="height:100px" 
| D || style="width:100px"|E || F
|-
| G || H || I
|}

produces:

A	B	C
D	E	F
G	H	I

• If you want to apply style attributes to only a row, write style=" " for the corresponding row-break (|-) e.g. |- style="height:100px".
• If you want to apply it to a single cell, write style=" " with a pipe (|) succeeding it; all of this is written after the double pipes (||) that create the cell in question and before the text of the cell, e.g. | D || style="width:100px"|E || F if you want to apply attributes to the cell "E".

Pre-defined tables

Two types of table are predefined in Wiki CSS.

Wikitable

This is the table that you will be seeing forever. Admire its beauty as it is the table that you will most likely to creating.

{|class ="wikitable"
|- 
| A || wikitable || C
|- style="height:100px" 
| D || style="width:100px" |E || F
|-
| G || H || I
|}

A	wikitable	C
D	E	F
G	H	I

Infobox

A	infobox	C
D	E	F
G	H	I

{|class ="infobox"
|- 
| A || infobox || C
|- style="height:100px" 
| D || style="width:100px" |E || F
|-
| G || H || I
|}

Attributes

Additional parameters can be used on these tables to change background color, font size, padding etc. Use a colon (:) to determine an attribute and write every element of the attribute within its quotation marks (" ") e.g. style="color:red;" to assign the red color for that table. Some of these also work for text outside tables, but you can check that in Help:Wikitext. It is recommended to end every property with a semicolon (;) e.g. style="color:red; text-align:left;"

Units: px means pixels, % means percentage of the element occupied, em means relative to the font-size of the element, 1 means a number without unit.

style=" "

• text-align: determines the text alignment within the cells (does not affect the header (!) or title (|+) rows).
  • options: left, center or right
  • default: left

• width: determines the width of the cells.
  • units: px, % or em
  • default: auto

• height: determines the height of the cells.
  • units: px or em
  • default: auto

• line-height: determines the height between text lines.
  • units: px, %, em or 1
  • default: normal

• background:, background-color: determines the background-color of the cells (does not affect the header (!) or title (|+) rows).
  • default: transparent
  • colors: Help:Colors

• color: determines the color of the text within the cells.
  • colors: Help:Colors
  • default: black

• font-size: determines the size of the font within the cells.
  • units: px, % or em
  • default: 100%

Collapsing tables

Tables can be created to be "collapsed" i.e. hidden until [show] on the header is clicked (with [hide] you collapse it again). Adding collapsible to class="wikitable" within the quotation marks (" ") i.e. class="wikitable collapsible" produces:

{|class="wikitable collapsible"
! Header
|-
|Content to be hidden
|-
|more content to be hidden
|}

Header
Content to be hidden
more content to be hidden

Using only collapsible will not automatically collapse the table, but will add a button to do so.

Collapsed tables

To create a collapsible table that is by default collapsed, add collapsed to class="wikitable collapsible" within the quotation marks (" ") i.e. class="wikitable collapsible collapsed":

{|class="wikitable collapsible collapsed"
! Header
|-
|Hidden content
|-
|more hidden content
|}

Header
Hidden content
more hidden content

Any other formatting can be included:

{| class="infobox collapsible collapsed" border="1" cellpadding="0" cellspacing="0" style="line-height:15px; margin-left:auto;margin-right:20%; clear:both; width:60%; border: 2px solid grey; text-align:left;font-size:70%;"
! Header
|-
|Content which starts hidden
|-
|more hidden content
|}

Header
Content which starts hidden
more hidden content

"collapsible autocollapse" will collapse tables after the first two.

"remembercollapse"

"collapsible remembercollapse" and "collapsible collapsed remembercollapse" will remember the state of the table and restore it when the page is reloaded.

You must give the table a unique id if you use "remembercollapse", thus:

{| class="infobox collapsible collapsed remembercollapse" '''id="example"''' border="1" cellpadding="0" cellspacing="0" style="line-height:15px; :margin-left:auto;margin-right:20%; clear:both; width:60%; border: 2px solid grey; text-align:left;font-size:70%;"
! Header
|-
|Content which starts hidden
|-
|more hidden content
|}

Produces:

Header
Content which starts hidden
more hidden content

(reload the page after "showing" the two examples above to see the difference)

Sortable tables

Tables can be made to "sort":

{| class="wikitable sortable"
!Col 1
!Col 2
!Col 3
!Col 4
|-
|1
|3
|5
|B
|-

|7
|2
|9
|Z
|-

|0
|12
|8
|Q
|}

or more concisely but exactly equivalent:

{| class="wikitable sortable"
|-
!Col 1!!Col 2!!Col 3!!Col 4
|-
|1||3||5||B
|-
|7||2||9||Z
|-
|0||12||8||Q
|}

Either of the above will produce:

Col 1	Col 2	Col 3	Col 4
1	3	5	B
7	2	9	Z
0	12	8	Q

All columns of the table will be sorted into the (ascending/descending) order of the column on which the little "><" symbol in the top row is clicked. (click once for ascending, a second time for descending)

Note: It is not necessary for the first row to be a header row: a pipe (|) can be used instead of an exclamation mark (!).

Merging cells

You can merge (fusion) cells horizontally (left-to-right) with colspan=" " and vertically (top-to-bottom) with rowspan=" ". Within the quotation marks (" "), you can specify the number of cells to be merged.

For example, writing...

{|class="wikitable"
| A || colspan="2"|| B C
|- 
| D || rowspan="2"|E<br>H || F
|-
| G || H || I
|}

produces:

A	B C
D	E H	F
G		I

You can also combine colspan=" " with rowspan=" ", using both while separating them with whitespace ( ). Example:

{|class="wikitable"
| A || B || C
|- 
| D || colspan="2" rowspan="2"|E F<br>H I
|}

yields:

A	B	C
D	E F H I
G

In HTML

Tables can be written in wikitalk. It is not advisable to create tables in HTML, as HTML tables are harder to maintain than wikitext tables. Unfortunately, you can do this:

<table width="75%" border="1">

<tr>
<td> 1.1</td>
<td> 1.2</td>
<td> 1.3</td>
</tr>
<tr>
<td> 2.1</td>
<td> 2.2</td>
<td> 2.3</td>
</tr>

<tr>
<td> 3.1</td>
<td> 3.2</td>
<td> 3.3</td>
</tr>
</table>

This produces the 3 x 3 table:

1.1	1.2	1.3
2.1	2.2	2.3
3.1	3.2	3.3

(Sneaky way to create a table: With Dreamweaver or some similar prog design your table there & copy/paste the code into your page.)

Janitors can clean away HTML tables by using a HTML to wikitext converter.

See also

• See the Wikipedia article on Help:Table.