Revision [393]

This is an old revision of TableMarkup made by DarTar on 2007-02-06 18:01:39.

 

HomePage

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 1Cell 2Cell 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 1Cell 2Cell 3
Cell 4Cell 5Cell 6
Cell 7Cell 8Cell 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||

ApplesPears
300Kg480Kg

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||

Apples300Kg
Pears480Kg

You should be able by now to create simple tables with row and column headings:

|=| |=|Apples|=|Pears|=|
|=|Mary||300Kg||320Kg||
|=|John||400Kg||630Kg||

ApplesPears
Mary300Kg320Kg
John400Kg630Kg

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||

Fruit production in 2006
ApplesPears
Mary300Kg320Kg
John400Kg630Kg

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 columnsCell 3
Cell 4Cell 5Cell 6
Cell 7Cell 8Cell 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 rowsCell 2Cell 3
Cell 5Cell 6
Cell 7Cell 8Cell 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||

2x22x11x2
1x21x1
1x11x12x1

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||

Fruit production in the last two years
ApplesPears
2005200620052006
Mary300Kg320Kg400kg280Kg
John400Kg630Kg210Kg300Kg




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"}}||

MonoForced n/a Bold mono
Italics

Heading

Strike xml
SandBox escapedembeddedhtml
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||

The Caption
NameNumberSpan
John Smith1ThisThat
Jane Doe2ThatThis


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||

The Caption
NameJohn SmithJane Doe
Number12
SpanThisThat
ThatThis


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||

Table 1: Company data
EmployeesFounded
ACME Inc10001947
XYZ Corp20001973



|!|(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||

thead, tfoot, tbody, tbody
NamePlaceTelephone
NamePlaceTelephone
John SmithNew York555-1234
Jane SmithLoa Angeles555-2345
John DoeUnknownUnknown
Jane DoeUnknownUnknown


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||

2x22x11x2
1x21x1
1x11x12x1
 


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||

Ohi, ohi, ohi, ohi!
Ephemere Quibus
First things firstSecond things second
MonoA forced link and an escaped CamelCase link n/a (action generated content) Bold mono
Italics

Heading

Strike xml
echo "Even some code!"
embeddedhtml
Hello
testme
 

Valid XHTML :: Valid CSS: :: Powered by WikkaWiki