Help:Tables
Contents |
[edit] In wiki
[edit] Worthless Table
{| | A | B | C |- | D | E | F |- | G | H | I |} produces:
| A | B | C |
| D | E | F |
| G | H | I |
[edit] Slightly Proficient Table
{| class="wikitable" style="text-align:center" |+{Text} |- ! X !! A !! A !! A |- ! A | A || A || A |- ! A | A || A || A |- ! A | A || A || A |- ! A | A || A || A |- ! A | A || A || A |} produces:
| X | A | A | A |
|---|---|---|---|
| A | A | A | A |
| A | A | A | A |
| A | A | A | A |
| A | A | A | A |
| A | A | A | A |
[edit] Another Slightly Proficient Table
{| 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 |
Note, these are usually entered with a new line for each "|" symbol, or at least each "|-", to make them easier to work on.
Wiki method courtesy of: -Icewedge 13:27, 22 May 2007 (CDT)
[edit] Pre-defined tables
Two types of table are predefined in Wiki CSS
[edit] Wikitable:
- {|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 |
[edit] 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
- |}
Additional formatting can be used on these tables to change background colour, font size, padding etc.
[edit] Collapsing tables
Tables can be created to be "collapsed" i.e. only showing the header until "show" is clicked:
- {| class="wikitable collapsible collapsed" border="1"
- ! Header
- |-
- |Content which starts hidden
- |-
- |more hidden content
- |}</nowiki>
| Header |
|---|
| Content which starts hidden |
| more hidden content |
Using only "collapsible" and omitting "collapsed" will not automatically collapse the table, but will add a button to do so.
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
- |}</nowiki>
| Header |
|---|
| Content which starts hidden |
| more hidden content |
"collapsible autocollapse" will collapse tables after the first two.
[edit] "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)
[edit] 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: "|" can be used instead of "!".
[edit] In html
Tables can be written in wikitalk but for those who find it easier to use html:
<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 |
(If you really want a laugh look at this page in 'edit' mode, nowikis anyone? )
(Sneaky way to create a table: With Dreamweaver or some similar prog design your table there & copy/paste the code into your page.)