Help:Tables

From RationalWiki
Jump to: navigation, search

In wiki[edit]

Worthless table[edit]

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

produces:

A B C
D E F
G H I

Slightly proficient table[edit]

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

{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

Another slightly proficient table[edit]

 {| 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)

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
|}

Additional formatting can be used on these tables to change background colour, font size, padding etc.

Collapsing tables[edit]

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
|}

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
|}





"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:

(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)

Note: It is not necessary for the first row to be a "Header" row: "|" can be used instead of "!".

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]