WikiText tables can be styled by applying CSS classes. For basic information on wiktext tables and how to style them, see Tables in WikiText.
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:
Cell1 | Cell2 |
Cell3 | Cell3 |
Header | Header |
Footer | Footer |
As seen above, the resulting table is left aligned and grows to fit the content. This is the browser default layout behaviour for tables. To get another behaviour, various CSS classes can be added into the "k
row".
Utility Classes
Introduced in v5.2.4 The following outlines a few predefined CSS classes intended to make it simpler to style HTML block-elements and wikitext tables.
General Utility Classes
tc-center | Centres a block-element to the middle of the container |
tc-max-width | Expands a block-element to use the maximum width of the container |
tc-max-width-80 | Sets the width of a block-element to use 80% of the maximum container width. This setting is useful with the tc-center class |
tc-edit-max-width | Expands TextWidgets to use the maximum available width. See ControlPanel -> Info -> Basics |
tc-first-link-nowrap | Ensures that any links in the first table column will never wrap to the next line |
Table Utility Classes
tc-table-no-border | Removes the borders of a table |
tc-first-col-min-width | The first column of a table will take up minimal possible width. It adapts to the content |
Examples
The following examples apply the style classes to tables but the "General Utility Classes" can as well be used on DIVs or other HTML block elements
Centred Table
To center a table horizontally, use tc-center
:
|tc-center|k
|This is a caption |c
|Cell1 |Cell2 |
|Cell3 |Cell4 |
|Header|Header|h
|Footer|Footer|f
That renders as:
Cell1 | Cell2 |
Cell3 | Cell4 |
Header | Header |
Footer | Footer |
Centred Table, 80% Width
To add empty left and right margins to a table that is otherwise full-tiddler-width, you can use tc-max-width-80
|tc-center tc-max-width-80|k
|This is a caption |c
|Cell1 |<<.lorem>> |
|<<.lorem>> |Cell4 |
|Header|Header|h
That renders as:
Cell1 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | Cell4 |
Header | Header |
Table with Maximum Width
To expand a table to full tiddler width, use tc-max-width
|tc-max-width|k
|Header|Header|h
|Cell1 |Cell2 |
|Cell3 |Cell4 |
That renders as:
Header | Header |
Cell1 | Cell2 |
Cell3 | Cell4 |
Table with First Column Minimum Width
The following example shows a simple "form" where the first columns width is adjusted to its content by means of tc-first-col-min-width
|tc-max-width tc-first-col-min-width|k
|Header|Header|h
|Cell1 |<$edit-text tiddler="$:/temp/test-table-input" tag="input" field="test"/> |
|Cell3 |<$edit-text tiddler="$:/temp/test-table-input" field="text"/> |
That renders as:
Header | Header |
Cell1 | |
Cell3 |
Table with Maximum Width TextWidgets
Here, the previous "form" is styled further to give the TextWidgets full width by adding the class tc-edit-max-width
|tc-max-width tc-first-col-min-width tc-edit-max-width|k
|Header|Header|h
|Cell1 |<$edit-text tiddler="$:/temp/test-table-input" tag="input" field="test"/> |
|Cell3 |<$edit-text tiddler="$:/temp/test-table-input" field="text"/> |
That renders as:
Header | Header |
Cell1 | |
Cell3 |
Table with No Borders
The following is a table with maximum width. It contains TextWidgets with maximum width. The first column is set to be minimum width. Further, all links in the first column are set to not line break (wrap) regardless of window resize.
|tc-max-width tc-first-col-min-width tc-edit-max-width tc-table-no-border tc-first-link-nowrap|k
| Cell1|<$edit-text tiddler="$:/temp/test-table-input" tag="input" field="test"/> |
|^ [[Link to a tiddler]]<br>some more text|<$edit-text tiddler="$:/temp/test-table-input" field="text"/> |
That renders as:
Cell1 | |
Link to a tiddler some more text |