Note: An alternative skin, TW4MW (work in progress), is available from the user preferences.
Tables
TiddlyWiki Community Wiki
Contents |
[edit] Formatting Codes
[edit] Basic Syntax
Table columns are delimited by pipe characters (|), while table rows are separated with a simple line break:
|!column heading 1|!column heading 2|!column heading 3|h |row 1, column 1|row 1, column 2|row 1, column 3| |row 2, column 1|row 2, column 2|row 2, column 3| |row 3, column 1|row 3, column 2|row 3, column 3| |!column footer 1|!column footer 2|!column footer 3|f |caption|c
Note that the trailing |h at the end of the first line defines the table header, which is semantically different from the column heading.
Usually, however, the table header will contain the column headings.
[edit] Text Alignment
As the following example shows, spaces before and after a cell's content control the alignment:
|default alignment| |left-aligned cell content | | right-aligned cell content| | centered cell content |
[edit] Column Spans
A carets (>) in a table cell creates a so-called "colspan", spreading the cell across several columns.
Example:
|>|>| cell #3 |
Here the first two cells are omitted so that the third cell spreads across all three columns.
[edit] Row Spans
A tilde (~) spreads a table cell across several rows, creating a so-called "rowspan".
Example:
|cell #1|cell #2| |~|cell #4| |~|cell #6|
Here the first cell spreads across three rows.
[edit] Simple Lists
TiddlyWiki tables do not easily permit numbered and bulleted lists with formatting.
Using <br> for manual line breaks allows the creation of a modest ("fake") list within a cell.
Example:
|* List item 1<br>* List item 2<br>* list item 3<br><br>* List item with double-spacing|
Bullet points can be used in a table cells only with the help of transclusion (as described in Multi-Line Contents).
[edit] Styling
[edit] Inline Styles
Custom CSS code can be applied to table cells by adding the CSS ruleset at the beginning of the respective table cell:
|property:value;cell contents|
There is also an alternative syntax, which deviates slightly from the CSS standard:
|property(value);cell contents|
[edit] Custom CSS Classes
A table can be assigned a custom CSS class by adding the following code to the beginning or end of the table:
|foo|k
(where "foo" is the name of the custom CSS class)
[edit] Alternating Rows
TiddlyWiki automatically assigns the classes oddRow and evenRow to table rows.
These can then be styled via the StyleSheet - for example:
.viewer tr.oddRow { background-color: #FFF; }
.viewer tr.evenRow { background-color: #FFE; }
[edit] Examples
- the following code makes the second cell's contents appear in bold red:
|cell #1|font-weight:bold;color:#f00;cell #2|cell #3|
- this code changes the first cell's background color to light blue:
|bgcolor(#eef):cell #1|cell #2|
[edit] Centering Tables
- StyleSheet
.viewer div.centeredTable {
text-align: center;
}
.viewer div.centeredTable table {
margin: 0 auto;
text-align: left;
}
- tiddler contents
{{centeredTable{
|test1|test2|test3|
|test4|test5|test6|
}}}
[edit] Borderless Tables
- StyleSheet
.viewer table.borderless,
.viewer table.borderless * {
border: 0;
}
- tiddler contents
|borderless|k |!foo|bar|
[edit] HTML Code
Raw HTML code can also be used by wrapping it in <html></html> tags. This can be useful for setting custom row or cell attributes.
