Difference between revisions for Playground / Table Markup Guide
Additions:
As of **!!(green)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.
===Table basics===
====Cells====
====Rows====
====Columns====
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 ##*|## or ##^|## as a
delimiter.
The following is an example of a simple table with **column
headings**, they must be terminated at the end of the row with the
##|*## :
**Row headings** are created in the same way. Since they are usually
followed by normal cells, they must be terminated with the
##""|""## standard delimiter if the next element
in the row is a simple cell:
?| Fruit production in 2026 |?
?| Fruit production in 2026 |?
|| 12-13 | | | ||
|| 13-14 | | | ||
|| 14-15 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
|| 15-16 | | || <-- reduced by one column
|| 16-17 | | ||
|| 12-13 | | | ||
|| 13-14 | | | ||
|| 14-15 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
|| 15-16 | | ||
|| 16-17 | | ||
*| | 2025 | 2026 | 2025 | 2026 |*
*| | 2025 | 2026 | 2025 | 2026 |*
||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
|| Forced links: | [[/HomePage main]] ||
|| Image links: | file:/Przewalski-horses.jpg?600 ||
|| Forced links: | [[/HomePage main]] ||
|| Image links: | file:/Przewalski-horses.jpg?600 ||
You can also use [[Docs:UsingHTML embedded HTML]] in table elements:
##""||""{''style options''}
Element content ""||""##
?| 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 ||
##id## attributes are used to refer to unique elements in a page and
to provide an anchor for styling and linking. You can specify an
##id## for any table element by using the
##(i=''id'')## parameter.
!|(i=main_table)|!
||(i=cell_1)This cell can be referred to by using the ##cell_1## id||
||(i=cell_2)This cell can be referred to by using the ##cell_2## id||
||(i=cell_1)This cell can be referred to by using the ##cell_1## id||
||(i=cell_2)This cell can be referred to by using the ##cell_2## id||
!|{width: 400px}|!
!|{width: 400px}|!
* Column heading scopes can be specified using the ##(o=col)##
parameter in the corresponding column heading;
* Row heading scopes can be specified using the ##(o=row)##
parameter in the corresponding row heading;
*| |(o=col)Employees|(o=col)Founded|*
^|(o=row)ACME Inc|1000|1947||
^|(o=row)XYZ Corp|2000|1973||
*| |(o=col)Employees|(o=col)Founded|*
^|(o=row)ACME Inc|1000|1947||
^|(o=row)XYZ Corp|2000|1973||
Deletions:
As of ##6.2##, WackoWiki 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.
===Table basics: cells, rows, columns===
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**:
**Row headings** are created in the same way. Since they are usually
followed by normal cells, they must be terminated with the
##""||""## standard delimiter if the next element
in the row is a simple cell:
?| Fruit production in 2006 |?
?| Fruit production in 2006 |?
|| 12-1 | | | ||
|| 1-2 | | | ||
|| 2-3 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
|| 3-4 | | || <-- reduced by one column
|| 4-5 | | ||
|| 12-1 | | | ||
|| 1-2 | | | ||
|| 2-3 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
|| 3-4 | | ||
|| 4-5 | | ||
*| | 2005 | 2006 | 2005 | 2006 |*
*| | 2005 | 2006 | 2005 | 2006 |*
||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
|| Forced links: | [[HomePage main]] ||
|| Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
|| Forced links: | [[HomePage main]] ||
|| Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
You can also use [[Docs:UsingHTML embedded HTML]] in table elements:
##""||""{''style
options''}Element content""||""##
?|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}1
x1|(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}1
x1|(x=2){background-color:pink}2x1||
##id## attributes are used to refer to unique elements in a page and
to provide an anchor for styling and linking. You can specify an
##id## for any table element by using the
##(i:''id'')## parameter.
||(i:cell_1)This cell can be referred to by using the ##cell_1## id||
||(i:cell_2)This cell can be referred to by using the ##cell_2## id||
||(i:cell_1)This cell can be referred to by using the ##cell_1## id||
||(i:cell_2)This cell can be referred to by using the ##cell_2## id||
====Adding titles====
Any table element can be given a ##title## 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 2006|?
*| |(t:yearly production of apples)Apples|(t:yearly production of
pears)Pears|*
^|(t:Mary's contribution to 2006 production)Mary|(t:Mary's
production of apples in 2006){text-align:center}300Kg|(t:Mary's
production of pears in 2006){text-align:center}320Kg||
^|(t:John's contribution to 2006 production)John|(t:John's
production of apples in 2006){text-align:center}400Kg|(t:John's
production of pears in 2006){text-align:center}630Kg||
!|(t:Comparative figures for fruit production in the last year){width:
350px}|!
?|Fruit production in 2006|?
*| |(t:yearly production of apples)Apples|(t:yearly production of
pears)Pears|*
^|(t:Mary's contribution to 2006 production)Mary|(t:Mary's
production of apples in 2006){text-align:center}300Kg|(t:Mary's
production of pears in 2006){text-align:center}320Kg||
^|(t:John's contribution to 2006 production)John|(t:John's
production of apples in 2006){text-align:center}400Kg|(t:John's
production of pears in 2006){text-align:center}630Kg||
====Adding a summary====
Tables can take an optional ##summary## attribute to describe the
purpose and/or structure of the table. The description provided by the
summary attribute is particularly helpful to users of non-visual
browsers. You can specify a summary by adding a
##(u:''Summary'')## parameter in the table global
attributes.
For example, the following line:
##""!|(u:This is a summary)|!""##
will add to the table a ##summary## attribute with the value ##This is
a summary##.
!|(u:A table with summary, caption, head, foot and body){width:
400px}|!
!|(u:A table with summary, caption, head, foot and body){width:
400px}|!
* Column heading scopes can be specified using the ##(o:col)##
parameter in the corresponding column heading;
* Row heading scopes can be specified using the ##(o:row)##
parameter in the corresponding row heading;
!|(u:The number of employees and the foundation year of some imaginary
companies.)|!
*| |(o:col)Employees|(o:col)Founded|*
^|(o:row)ACME Inc|1000|1947||
^|(o:row)XYZ Corp|2000|1973||
!|(u:The number of employees and the foundation year of some imaginary
companies.)|!
*| |(o:col)Employees|(o:col)Founded|*
^|(o:row)ACME Inc|1000|1947||
^|(o:row)XYZ Corp|2000|1973||