Help:Tables
In wikitext[edit]
Worthless table[edit]
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[edit]
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"
|+title
|-
! 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...
| X | A | A | A | 
|---|---|---|---|
| B | A | A | A | 
| B | A | A | A | 
| B | A | A | A | 
| B | A | A | A | 
| B | A | A | A | 
!) 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[edit]
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 || Fif you want to apply attributes to the cell "E".
Pre-defined tables[edit]
Two types of table are predefined in Wiki CSS.
Wikitable[edit]
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[edit]
| 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[edit]
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;"
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=" "[edit]
- text-align:determines the text alignment within the cells (does not affect the header (- !) or title (- |+) rows).- options: left,centerorright
- default: left
 
- options: 
- width:determines the width of the cells.- units: px,%orem
- default: auto
 
- units: 
- height:determines the height of the cells.- units: pxorem
- default: auto
 
- units: 
- line-height:determines the height between text lines.- units: px,%,emor1
- default: normal
 
- units: 
- background:,- background-color:determines the background-color of the cells (does not affect the header (- !) or title (- |+) rows).- default: transparent
- colors: Help:Colors
 
- default: 
- 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,%orem
- default: 100%
 
- units: 
Collapsing tables[edit]
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[edit]
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"[edit]
"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[edit]
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)
|) can be used instead of an exclamation mark (!).Merging cells[edit]
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[edit]
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[edit]
- See the Wikipedia article on Help:Table.