SQLite Testing

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.

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

Spans

Spans are used to combine multiple cells or multiple headings vertically or horizontally and are created using the following attribute parameters:
||(''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 ||
||(x=2) Cell spanning 2 columns | Cell 3 ||
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 ||
||(y=2) Cell spanning 2 rows | Cell 2 | Cell 3||
|| 8-9 | |(y=9) Outreach| |(y=9) Outreach | ||
|| 12-1 | | | ||
|| 1-2 | | | ||
|| 2-3 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
|| 3-4 | | || <-- reduced by one column
|| 4-5 | | ||
|| 8-9 | |(y=9) Outreach| |(y=9) Outreach | ||
|| 12-1 | | | ||
|| 1-2 | | | ||
|| 2-3 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
|| 3-4 | | ||
|| 4-5 | | ||
*| |(x=2) Apples |(x=2) Pears |*
*| | 2005 | 2006 | 2005 | 2006 |*
*| |(x=2) Apples |(x=2) Pears |*
*| | 2005 | 2006 | 2005 | 2006 |*
||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
||(y=2) 1x2 | 1x1 ||
|| 1x1 | 1x1 |(x=2) 2x1 ||
||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
||(y=2) 1x2 | 1x1 ||
|| 1x1 | 1x1 |(x=2) 2x1 ||

Formatting text within tables

|| !!Highlighted!! | --Strikethrough-- |(x=2) **//Bold italics//** ||
|| !!Highlighted!! | --Strikethrough-- |(x=2) **//Bold italics//** ||

Adding actions and images within tables

Adding links within tables

|| Forced links: | [[HomePage main]] ||
|| Forced links: | [[HomePage main]] ||

Adding HTML within tables

You can also use embedded HTML in table elements:

Adding a touch of style

||{''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: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||