Revision [393]
This is an old revision of TableMarkup made by DarTar on 2007-02-06 18:01:39.
Wikka Table Markup Guide
As of 1.1.7, Wikka introduces a flexible markup for data tables. Any kind of tables allowed by XHTML can be created using this markup, from the most basic example (simple rows of cells) to complex tables with full accessibility elements.
1. The basics: cells, rows, columns
The most basic element of a table is a cell. A table with a single cell can be created using || as delimiters, e.g.:||Hello||
Hello |
A cell must always be preceded and followed by cell delimiters.
Rows can be created by adding multiple cells separated with cell delimiters:
||Cell 1||Cell 2||Cell 3||
Cell 1 | Cell 2 | Cell 3 |
Columns can be created by adding rows on separate lines:
||Cell 1||
||Cell 2||
||Cell 3||
Cell 1 |
Cell 2 |
Cell 3 |
Now you should be able to create simple tables with multiple rows and columns.
||Cell 1||
||Cell 2||
||Cell 3||
Cell 1 | Cell 2 | Cell 3 |
Cell 4 | Cell 5 | Cell 6 |
Cell 7 | Cell 8 | Cell 9 |
2. Headings
As soon as you create slightly more complex data tables, you will need to specify column and row headings. Headings are special cells that specify what kind of data rows and columns contain. The most basic way of creating a heading is by using |=| as a delimiter.
The following is an example of a simple table with column headings:
|=|Apples|=|Pears|=|
||300Kg||480Kg||
Apples | Pears |
---|---|
300Kg | 480Kg |
Row headings are usually followed by normal cells, so they are terminated with the || delimiter if the next element in the row is a simple cell:
|=|Apples||300Kg|=|
|=|Pears||480Kg||
Apples | 300Kg |
---|---|
Pears | 480Kg |
You should be able by now to create simple tables with row and column headings:
|=| |=|Apples|=|Pears|=|
|=|Mary||300Kg||320Kg||
|=|John||400Kg||630Kg||
Apples | Pears | |
---|---|---|
Mary | 300Kg | 320Kg |
John | 400Kg | 630Kg |
We will describe later how to add accessibility parameters for row and column headings.
3. Captions
Usually tables are introduced with a caption that describes what the table contains. A caption element is introduced with a |?|| delimiter and terminated with a normal delimiter ||.
|?|Fruit production in 2006||
|=| |=|Apples|=|Pears|=|
|=|Mary||300Kg||320Kg||
|=|John||400Kg||630Kg||
Apples | Pears | |
---|---|---|
Mary | 300Kg | 320Kg |
John | 400Kg | 630Kg |
4. Spans
Spans are used to combine multiple cells or multiple headings vertically or horizontally. A cell spanning n columns is generated by introducing the cell content with a (x:n) parameter.
The following example, shows how to create a cell spanning two columns:
||(x:2)Cell spanning 2 columns||Cell 3||
||Cell 4||Cell 5||Cell 6||
||Cell 7||Cell 8||Cell 9||
Cell spanning 2 columns | Cell 3 | |
Cell 4 | Cell 5 | Cell 6 |
Cell 7 | Cell 8 | Cell 9 |
Spans can also be applied to rows. A cell spanning n rows is generated by introducing the cell content with a (y:n) parameter.
The following example shows how to create a cell spanning two rows
||(y:2)Cell spanning 2 rows||Cell 2||Cell 3||
||Cell 5||Cell 6||
||Cell 7||Cell 8||Cell 9||
Cell spanning 2 rows | Cell 2 | Cell 3 |
Cell 5 | Cell 6 | |
Cell 7 | Cell 8 | Cell 9 |
Column and row spans can be combined to created funky table layouts:
||(x:2;y:2)2x2||(x:2)2x1||(y:2)1x2||
||(y:2)1x2||1x1||
||1x1||1x1||(x:2)2x1||
2x2 | 2x1 | 1x2 | ||
1x2 | 1x1 | |||
1x1 | 1x1 | 2x1 |
Spans are particularly useful to create subheadings:
|?|Fruit production in the last two years||
|=| |=|(x:2)Apples|=|(x:2)Pears|=|
|=| |=|2005|=|2006|=|2005|=|2006|=|
|=|Mary||300Kg||320Kg||400kg||280Kg||
|=|John||400Kg||630Kg||210Kg||300Kg||
Apples | Pears | |||
---|---|---|---|---|
2005 | 2006 | 2005 | 2006 | |
Mary | 300Kg | 320Kg | 400kg | 280Kg |
John | 400Kg | 630Kg | 210Kg | 300Kg |
Wikka markup within cells
||##Mono##||[[HomePage | Forced]]|| {{wikkaversion}}|| **##Bold mono##** ||
||//Italics//||===Heading===||++Strike++|| {{image url="http://wiki.tormodh.net/images/xml.png" alt="xml" title="xml feed"}}||
||SandBox escaped||embedded<sup>html</sup>||@@center@@||{{color c="red" text="testme"}}||
Mono | Forced | n/a | Bold mono |
Italics | Heading | Strike | |
SandBox escaped | embeddedhtml |
center
| testme |
Summary and caption
|!|(u:The Summary)||
|?|The Caption||
|=|Name|=|Number|=|(x:2)Span||
||John Smith||1||This||That||
||Jane Doe||2||That||This||
Name | Number | Span | |
---|---|---|---|
John Smith | 1 | This | That |
Jane Doe | 2 | That | This |
Summary, caption and scope
|!|(u:The Summary)||
|?|The Caption||
|=|(o:row)Name||John Smith||Jane Doe||
|=|(o:row)Number||1||2||
|=|(o:row;y:2)Span||This||That||
||That||This||
Name | John Smith | Jane Doe |
---|---|---|
Number | 1 | 2 |
Span | This | That |
That | This |
Summary, caption and scope
|!|(u:The number of employees and the foundation year of some imaginary companies.)||
|?|Table 1: Company data||
|||=|(o:col)Employees|=|(o:col)Founded||
|=|(o:row)ACME Inc||1000||1947||
|=|(o:row)XYZ Corp||2000||1973||
Employees | Founded | |
---|---|---|
ACME Inc | 1000 | 1947 |
XYZ Corp | 2000 | 1973 |
Table header, body and footer
|!|(u:A table with summary, caption, thead, tfoot and two tbody)||
|?|thead, tfoot, tbody, tbody||
|[|
|=|Name|=|Place|=|Telephone||
|]|
|=|Name|=|Place|=|Telephone||
|#|
||John Smith||New York||555-1234||
||Jane Smith||Loa Angeles||555-2345||
|#|
||John Doe||Unknown||Unknown||
||Jane Doe||Unknown||Unknown||
Name | Place | Telephone |
---|---|---|
Name | Place | Telephone |
John Smith | New York | 555-1234 |
Jane Smith | Loa Angeles | 555-2345 |
John Doe | Unknown | Unknown |
Jane Doe | Unknown | Unknown |
Styling with CSS selectors, 1
|!|{float:right}||
||(x:2;y:2){background-color:pink}2x2||(x:2){background-color:lightblue}2x1||(y:2){background-color:lightyellow}1x2||
||(y:2){background-color:lightyellow}1x2||{background-color:#333;color:white}1x1||
||{background-color:lightblue}1x1||{background-color:#333;color:white}1x1||(x:2){background-color:pink}2x1||
2x2 | 2x1 | 1x2 | ||
1x2 | 1x1 | |||
1x1 | 1x1 | 2x1 |
Styling with CSS selectors, 2
|!|(i:Hello;u:What a gorgeous table!){float:left}||
|?|Ohi, ohi, ohi, ohi!||
|[|
|=|(x:4){color:#000;font-size:150%;font-style:italic;font-family:Hoefler Text, Georgia;font-weight:normal;line-height:150%}Ephemere Quibus||
|#|
|=|(x:2)First things first|=|(x:2)Second things second||
||##Mono##||A [[WikiHome | forced link]] and an escaped CamelCase link|| {{wikkaversion}} (action generated content)|| **##Bold mono##** ||
||//Italics//||===Heading===||++Strike++|| {{image url="http://wiki.tormodh.net/images/xml.png" alt="xml" title="xml feed"}}||
||%%echo "Even some code!"%%||embedded<sup>html</sup>||>>Hello>>||(i:moah){background:#000;text-align:center;color:white}testme||
Ephemere Quibus | |||
---|---|---|---|
First things first | Second things second | ||
Mono | A forced link and an escaped CamelCase link | n/a (action generated content) | Bold mono |
Italics | Heading | Strike | |
echo "Even some code!" | embeddedhtml | Hello | testme |