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.