Help:Tables

From RationalWiki
Jump to navigation Jump to search

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]

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[edit]

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[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;"

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=" "[edit]

  • 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).
  • color: determines the color of the text within the cells.
  • font-size: determines the size of the font within the cells.
    • units: px, % or em
    • default: 100%

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

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: a pipe (|) 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]

Retrieved from "https://rationalwiki.org/w/index.php?title=Help:Tables&oldid=2504443"