Tables
Short Description
Demonstrates on how you can create simple and advanced tables
Simple tables
You can create simple tables using pairs of vertical bars:
||~ head 1 ||~ head 2 ||~ head 3 ||
|| cell 1 || cell 2 || cell 3 ||
|||| long cell 4 || cell 5 ||
||cell 6 |||| long cell 7 ||
|||||| looong cell 8||
| head 1 | head 2 | head 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| long cell 4 | cell 5 | |
| cell 6 | long cell 7 | |
| looong cell 8 | ||
|| lines must start and end || with double vertical bars || nothing ||
|| cells are separated by || double vertical bars || nothing ||
|||| you can span multiple columns by || starting each cell ||
|| with extra cell |||| separators ||
|||||| but perhaps an example is _
the easiest way to see ||
lines must start and end
with double vertical bars
nothing
cells are separated by
double vertical bars
nothing
you can span multiple columns by
starting each cell
with extra cell
separators
but perhaps an example is
the easiest way to see
the easiest way to see
For a new line inside the table cell use _ (underscore) at the end of the line (see the example above).
Advanced (custom) tables
To create more advanced tables, special tags can be used that can accept class and style attributes for managing appearance. To create an advanced table use the following syntax:
[[table]]
[[row]]
[[cell style="border: 1px solid silver; background-color: yellow;"]]
cell 0.0
[[/cell]]
[[cell style="border: 1px solid silver"]]
cell 0.1
[[/cell]]
[[/row]]
[[row style="border: 1px solid silver"]]
[[cell]]
cell 1.0
[[/cell]]
[[cell style="border: 1px solid silver; background-color: yellow;"]]
cell 1.1
[[/cell]]
[[/row]]
[[/table]]
transforms to…
cell 0.0
cell 0.1
cell 1.0
cell 1.1
Each of elements [[table]], [[row]] and [[cell]] can accept attributes style and class and they are transformed to (X)HTML tags: <table>, <tr> and <td>.
An example of using tables for page layout can be found on our Snippets Wiki at: http://snippets.wikidot.com/code:layout-with-tables .
Tables can be nested.
page revision: 1, last edited: 02 May 2010 08:09