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|kassigns the CSS classes "myclass" and "anotherClass" to the table|This is a caption |cgives the table the caption "This is a caption"|Header|Header|hadds a header row of cells with the text "Header"|Footer|Footer|fadds 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