This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

Tables in WikiText

19th August 2022 at 10:34am

Basics

TiddlyWiki5 formats tables using vertical bar | characters. Exclamation marks ! are used to indicate header cells.

|!Cell1 |!Cell2 |
|Cell3 |Cell3 |

That renders as:

Cell1Cell2
Cell3Cell3

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 lefttop centertop right::
::
::
::
middle leftmiddle centermiddle right::
::
::
::
bottom leftbottom centerbottom 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:

Cell1Cell2Cell3Cell4
Cell5Cell6Cell7
Cell5Cell7Cell8
Cell9Cell10Cell11

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:

This is a caption
Cell1Cell2
Cell3Cell3
HeaderHeader
FooterFooter

More examples can be found at: Tables in WikiText CSS Utility Classes