There is no RationalWiki without you. We are a small non-profit with no staff—we are hundreds of volunteers who document pseudoscience and crankery around the world every day. We will never allow ads because we must remain independent. We cannot rely on big donors with corresponding big agendas. We are not the largest website around, but we believe we play an important role in defending truth and objectivity. |
Fighting pseudoscience isn't free. We are 100% user-supported! Help and donate $5, $10, $20 or whatever you can today with ![]() ![]() |
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" |+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...
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 || 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;"
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
orright
- default:
left
- options:
width:
determines the width of the cells.- units:
px
,%
orem
- default:
auto
- units:
height:
determines the height of the cells.- units:
px
orem
- default:
auto
- units:
line-height:
determines the height between text lines.- units:
px
,%
,em
or1
- 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 |}
[hide]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 |}
[show]Header |
---|
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 |}
[show]Header |
---|
"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:
[show]Header |
---|
(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.
[show]Help pages for RationalWiki |
---|