Revision [415]
This is an old revision of TableMarkup made by DarTar on 2007-02-07 15:40:06.
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 examples (e.g. simple rows of cells) to complex tables with full support for accessibility options.
1. Table basics: cells, rows, columns
The most basic element of a table is a cell. Single cells can be created using || as delimiters, e.g.:
||Hello||
Hello |
Note that a cell must always be open and closed by delimiters.
Rows can be created by adding on the same line multiple cells:
||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 |
By now you should be able to create simple tables with multiple rows and columns.
||Cell 1||Cell 2||Cell 3||
||Cell 4||Cell 5||Cell 6||
||Cell 7||Cell 8||Cell 9||
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 created in the same way. Since they are usually followed by normal cells, they must be 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 standard cell 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 and are created using bracketed markup:
||(span options)Element content||
A cell spanning multiple columns is generated by prefixing the cell content with a (x:n) parameter, where n is the number of columns to be spanned. 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 multiple rows is generated by prefixing the cell content with a (y:n) parameter, where n is the number of rows to be spanned. 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 |
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 |
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 |
5. Formatting text within tables
You can use any kind of basic TextFormatting Wikka markup to render text within tables.
The following example adds basic formatting to cell content:
|?|Using text formatting within tables||
||##Monospaced##||//Italics//||**Bold**||__Underlined__||
||''Highlighted''||++Strikethrough++||(x:2)**//Bold italics//**||
Monospaced | Italics | Bold | Underlined |
Highlighted | Strikethrough | Bold italics |
6. Adding actions and images within tables
Simple, content-generating actions (including images) can be added within table cells and headings.
|?|Using actions within tables||
||This wiki contains {{countpages}} pages||
||{{image url="images/ww.jpg" alt="a w" title="w image"}}||
||{{color c="red" text="some colored text"}}||
This wiki contains 416 pages |
some colored text |
7. Adding links within tables
All the available options to create links can be used within table cells or headings:
|?|Adding links within tables||
||Camelcase links: SandBox||
||Escaped camelcase links: ""SandBox"" escaped||
||Forced links: [[HomePage | main]]||
||Interwiki links: Wikipedia:Wikka||
||Forced interwiki links: [[Wikipedia:Wikka | Wikka article on Wikipedia]]||
||External links: http://www.example.com ||
||Forced external links: [[http://www.example.com | Example.com]]||
||Image links: {{image url="images/icons/open.png" alt="book icon" title="Display an index of pages on this wiki" link="PageIndex"}}||
Camelcase links: SandBox |
Escaped camelcase links: SandBox escaped |
Forced links: main |
Interwiki links: Wikipedia:Wikka |
Forced interwiki links: Wikka article on Wikipedia |
External links: http://www.example.com |
Forced external links: Example.com |
Image links: |
8. Adding HTML within tables
You can also use embedded HTML in table cells:
|?|Embedding HTML within tables||
||Here's some superscript: ""a<sup>2+1</sup>""||
||And here's some subscript too: ""a<sub>2k</sub>""||
||I love acronyms: ""<acronym title="What You See Is What You Get">WYSIWYG</acronym>""||
Here's some superscript: a2+1 |
And here's some subscript too: a2k |
I love acronyms: WYSIWYG |
9. Adding a touch of style
The table markup introduces a style markup that will be progressively extended to any other Wikka markup. CSS style options can be added to any element by enclosing them within single braces, right before the element content, e.g.:
||{style options}Element content||
For example, to render a cell with red background and white text color, you can do the following:
||{background-color:red; color:white}Hello||
Hello |
You can play with font size and text alignment:
|?|Adding some more style||
||{font-size:190%; text-align:right}Please scale me!||
||{font-size:170%; text-align:right}Please scale me!||
||{font-size:150%; text-align:right}Please scale me!||
||{font-size:130%; text-align:right}Please scale me!||
||{font-size:110%; text-align:right}Please scale me!||
||{font-size:90%; text-align:right}Please scale me!||
||{font-size:70%; text-align:right}Please scale me!||
Please scale me! |
Please scale me! |
Please scale me! |
Please scale me! |
Please scale me! |
Please scale me! |
Please scale me! |
You can also apply style to headings and captions:
|?|{border:1px solid red; color:red}Style can be applied anywhere||
|=|{color:#000; font-size:150%; font-style:italic; font-family:Georgia, Hoefler Text, Georgia, serif; font-weight:normal; line-height:150%}Emphemeral Quibus|=|
||Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor auctor pede.||
Emphemeral Quibus |
---|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor auctor pede. |
Please note that braced markup should always follow bracketed markup, when both are specified for an element:
|?|Give priority||
||(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 |
--------------------------TO BE CONTINUED----------------------
|!|(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 |
X. Table Markup Summary
XHTML Elements | Markup code | Notes |
---|---|---|
<table> | |!| | Optional, only useful for adding attributes. Must be first in table markup if used. Should be on a line by itself. |
<caption> | |?| | |
<colgroup> | |_| | |
<col /> | |-| | Selfclosing - must not be closed! |
<thead> | |[| | |
<tfoot> | |]| | |
<tbody> | |#| | |
<tr> | none | Will be opened for each row of table cells. |
<th> | |=| | |
<td> | || |
Attribute | Markup key |
---|---|
Attribute | Markup key |
Core | |
id | i |
title | t |
class | c |
style | s |
i18n | |
xml:lang | l |
dir | d |
Table cells | |
colspan | x |
rowspan | y |
scope | o |
headers | h |
abbr | a |
axis | z |
Other Table elements | |
span | p |
summary | u |
CategoryEN