Difference between revisions for Playground / Table Markup Guide
Additions:
As of 6.2, Wacko introduces a flexible markup for data tables. Any kind of tables allowed by HTML5 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.
||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
?| 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 ||
?| 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 ||
||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
?| 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 ||
?| 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 ||
Deletions:
As of
||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
?|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||
?|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||
The following example adds titles to several table elements (you can hover over the table to display them):
!|(t="Comparative figures for fruit production in the last year"){width: 350px}|!
?|Fruit production in 2026|?
*| |(t="yearly production of apples")Apples|(t="yearly production of pears")Pears|*
^|(t="Mary's contribution to 2026 production")Mary|(t="Mary's production of apples in 2026"){text-align:center}300Kg|(t="Mary's production of pears in 2026"){text-align:center}320Kg||
^|(t="John's contribution to 2026 production")John|(t="John's production of apples in 2026"){text-align:center}400Kg|(t="John's production of pears in 2026"){text-align:center}630Kg||
!|(t="Comparative figures for fruit production in the last year"){width: 350px}|!
?|Fruit production in 2026|?
*| |(t="yearly production of apples")Apples|(t="yearly production of pears")Pears|*
^|(t="Mary's contribution to 2026 production")Mary|(t="Mary's production of apples in 2026"){text-align:center}300Kg|(t="Mary's production of pears in 2026"){text-align:center}320Kg||
^|(t="John's contribution to 2026 production")John|(t="John's production of apples in 2026"){text-align:center}400Kg|(t="John's production of pears in 2026"){text-align:center}630Kg||
!|(u:The number of employees and the foundation year of some imaginary companies.)|!
!|(u:The number of employees and the foundation year of some imaginary companies.)|!
6.2, Wacko introduces a flexible markup for data tables. Any kind of tables allowed by HTML5 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. ||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
?|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||
?|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||
Adding titles
Any table element can be given atitle attribute to enhance its accessibility. Titles are typically displayed in graphical browsers by hovering over the corresponding element and are useful to display unobtrusive descriptions about specific elements. You can specify a title for any table element by using the (t=''title'') parameter.The following example adds titles to several table elements (you can hover over the table to display them):
!|(t="Comparative figures for fruit production in the last year"){width: 350px}|!
?|Fruit production in 2026|?
*| |(t="yearly production of apples")Apples|(t="yearly production of pears")Pears|*
^|(t="Mary's contribution to 2026 production")Mary|(t="Mary's production of apples in 2026"){text-align:center}300Kg|(t="Mary's production of pears in 2026"){text-align:center}320Kg||
^|(t="John's contribution to 2026 production")John|(t="John's production of apples in 2026"){text-align:center}400Kg|(t="John's production of pears in 2026"){text-align:center}630Kg||
!|(t="Comparative figures for fruit production in the last year"){width: 350px}|!
?|Fruit production in 2026|?
*| |(t="yearly production of apples")Apples|(t="yearly production of pears")Pears|*
^|(t="Mary's contribution to 2026 production")Mary|(t="Mary's production of apples in 2026"){text-align:center}300Kg|(t="Mary's production of pears in 2026"){text-align:center}320Kg||
^|(t="John's contribution to 2026 production")John|(t="John's production of apples in 2026"){text-align:center}400Kg|(t="John's production of pears in 2026"){text-align:center}630Kg||
!|(u:The number of employees and the foundation year of some imaginary companies.)|!
!|(u:The number of employees and the foundation year of some imaginary companies.)|!