Note: An alternative skin, TW4MW (work in progress), is available from the user preferences.

Tables

TiddlyWiki Community Wiki

Jump to: navigation, search
This page's contents need to be reviewed and/or refactored to comply with TiddlyWiki.org's quality standards.
Please improve the article, or discuss the issue on the talk page.

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: 

|left-aligned cell content, version 1|
|left-aligned cell content, version 1 |
| right-aligned cell content, version 1|
| 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.

[edit] See Also

Retrieved from "http://tiddlywiki.org/wiki/Tables"
Personal tools