Basics
TiddlyWiki5 formats tables using vertical bar |
characters. Exclamation marks !
are used to indicate header cells.
|!Cell1 |!Cell2 |
|Cell3 |Cell3 |
That renders as:
Cell1 | Cell2 |
---|---|
Cell3 | Cell3 |
Cell Alignment
Table cell alignment is controlled by inserting space characters before and/or after the cell content. For example:
|Left aligned content |
| Right aligned content|
| Centred content |
|+++ a very wide column so we can see the alignment +++|
That renders as:
Left aligned content |
Right aligned content |
Centred content |
+++ a very wide column so we can see the alignment +++ |
Cell vertical Alignment
Vertical alignment of cells is done by inserting either a ^
for top alignment or a ,
for bottom alignment as the first character of a cell. The normal horizontal alignment is still possible. For example:
|^top left |^ top center |^ top right|
|middle left | middle center | middle right|
|,bottom left |, bottom center |, bottom right|
The example renders as:
:: | ::::::::::::::::::::::::::: | ::::::::::::::::::::::::::: | ::::::::::::::::::::::::::: | :: |
:: :: | top left | top center | top right | :: :: |
:: :: | middle left | middle center | middle right | :: :: |
:: :: | bottom left | bottom center | bottom right | :: :: |
:: | ::::::::::::::::::::::::::: | ::::::::::::::::::::::::::: | ::::::::::::::::::::::::::: | :: |
If you need to have a ^
or a ,
as the first character of a left aligned cell, you can use HTML escaping:
^ | ^ |
, | , |
Cell Merging
To merge a table cell with the one above, use the special cell text ~
. To merge a cell with the one to its left use the text <
. To merge one to its right use >
. For example:
|Cell1 |Cell2 |Cell3 |Cell4 |
|Cell5 |Cell6 |Cell7 |<|
|Cell5 |~|Cell7 |Cell8 |
|>|Cell9 |Cell10 |Cell11 |
That renders as:
Cell1 | Cell2 | Cell3 | Cell4 |
Cell5 | Cell6 | Cell7 | |
Cell5 | Cell7 | Cell8 | |
Cell9 | Cell10 | Cell11 |
Table Classes, Captions, Headers and Footers
Table CSS classes, captions, headers and footers can be specified as special pseudo-rows. The following example:
|myclass anotherClass|k
assigns the CSS classes "myclass" and "anotherClass" to the table|This is a caption |c
gives the table the caption "This is a caption"|Header|Header|h
adds a header row of cells with the text "Header"|Footer|Footer|f
adds a footer row of cells with the text "Footer"
|myclass anotherClass|k
|This is a caption |c
|Cell1 |Cell2 |
|Cell3 |Cell3 |
|Header|Header|h
|Footer|Footer|f
That renders as:
Cell1 | Cell2 |
Cell3 | Cell3 |
Header | Header |
Footer | Footer |
More examples can be found at: Tables in WikiText CSS Utility Classes