Simple Tables

|North West|North|North East|
|West|Here|East|
|South West|South|South East|
Displays as:
North WestNorthNorth East
WestHereEast
South WestSouthSouth East

Cell Formatting

  • Insert a space before cell content to right justify cell
  • Insert a space after cell content to left justify cell
  • Insert spaces before and after cell content to centre justify cell
  • Insert an exclamation mark (!) as the first non-space character of a cell to turn it into a header cell
For example:
|!First column|!Second column|!Third column|
|left | centre | right|
Displays as:
First columnSecond columnThird column
leftcentreright

Table Headers and Footers

  • Mark a table row as a header by adding an 'h' to the end
  • Mark a table row as a footer by adding an 'f' to the end
For example:
|North West|North|North East|h
|West|Here|East|
|South West|South|South East|f
Displays as:
North WestNorthNorth East
WestHereEast
South WestSouthSouth East

Table Caption

A caption can be added above or below a table by adding a special row marked with a 'c':
|A caption above the table|c
|North West|North|North East|
|West|Here|East|
|South West|South|South East|
|North West|North|North East|
|West|Here|East|
|South West|South|South East|
|A caption below the table|c
Displays as:
A caption above the table
North WestNorthNorth East
WestHereEast
South WestSouthSouth East

A caption below the table
North WestNorthNorth East
WestHereEast
South WestSouthSouth East

Mergine Table Cells

A cell can be merged horizontally with the cell to its right by giving it the text >:
|North West|North|North East|
|>|>|West and Here and East|
|South West|South|South East|
Displays as:
North WestNorthNorth East
West and Here and East
South WestSouthSouth East
A cell can be merged vertically with the cell in the row above by giving it the text ~:
|Westerly|North|North East|
|~|Here|East|
|~|South|South East|
Displays as:
WesterlyNorthNorth East
HereEast
SouthSouth East

Table CSS Formatting

A CSS class can be added to an entire table by adding a special row tagged with a 'k':
|myClass|k
|North West|North|North East|
|West|Here|East|
|South West|South|South East|
CSS properties can be added to a table cell by preceding the cell content with CSS name/value pairs. There are two alternative forms of syntax:
|color:red; North West|opacity:0.5;North|North East|
|color(green):West|Here|East|
|South West|South|South East|
Displays as:
North WestNorthNorth East
WestHereEast
South WestSouthSouth East

Alternating Rows

TiddlyWiki automatically assigns the classes oddRow and evenRow to table rows <TR> elements. These can then be styled via the StyleSheet:
.viewer tr.oddRow { background-color: #fff; }
.viewer tr.evenRow { background-color: #ffc; }
bag
tiddlywiki-com-ref_public
created
Fri, 11 Feb 2011 14:33:29 GMT
creator
matt
modified
Tue, 15 Feb 2011 15:17:00 GMT
modifier
psd
tags
formatting