Difference between revisions for Playground / Table Markup Guide




← Previous edit
Revision 18 as of 03/01/2026 08:05 ▼
20 03/01/2026 13:03 WikiAdmin 19 03/01/2026 08:06 WikiAdmin 18 03/01/2026 08:05 WikiAdmin 17 02/28/2026 07:03 WikiAdmin 16 02/28/2026 07:00 WikiAdmin 15 02/27/2026 17:41 WikiAdmin 14 02/27/2026 17:41 WikiAdmin 13 02/27/2026 17:37 WikiAdmin 12 02/27/2026 15:23 WikiAdmin 11 02/27/2026 15:23 WikiAdmin 10 02/27/2026 15:10 WikiAdmin 9 02/27/2026 15:08 WikiAdmin 8 02/27/2026 10:21 WikiAdmin 7 02/25/2026 18:55 WikiAdmin 6 02/25/2026 18:07 WikiAdmin 5 02/25/2026 16:03 WikiAdmin 4 02/25/2026 15:51 WikiAdmin 3 02/25/2026 15:20 WikiAdmin 2 02/25/2026 14:10 WikiAdmin 1 02/25/2026 14:06 WikiAdmin

(15.7 KiB)
WikiAdmin
 Next edit →
Revision 21 as of 03/03/2026 09:52 ▼
22 03/19/2026 08:34 WikiAdmin 21 03/03/2026 09:52 WikiAdmin 20 03/01/2026 13:03 WikiAdmin 19 03/01/2026 08:06 WikiAdmin

(15.5 KiB) -154
WikiAdmin

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


The most basic element of a table is a cell. Single cells can be created using the standard delimiter ||, e.g.:

#|
||Hello||
|#


Hello

Note that a cell must always be open and closed by delimiters.

Rows


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


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

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

#|
*| 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 | standard 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.

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

#|
?| Fruit production in 2026 |?
*| | Apples | Pears |*
^| Mary | 300Kg | 320Kg ||
^| John | 400Kg | 630Kg ||
|#


Fruit production in 2026
Apples Pears
Mary 300Kg 320Kg
John 400Kg 630Kg

Cell Spans

Cell 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 (colspan=''n'') parameter, where ''n'' is the number of columns to be spanned. The following example shows how to create a cell spanning two columns:

#|
||(colspan=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 (rowspan=''n'') parameter, where ''n'' is the number of rows to be spanned. The following example shows how to create a cell spanning two rows:

#|
||(rowspan=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

Note that you must account for cells that are "pushed down" when using row spans:

#|
*| | Mon | Tue | Wed | Thu | Fri |*
|| 8-9 | |(rowspan=9) Outreach | |(rowspan=9) Outreach | ||
|| 9-10 | | | || <-- reduced by two columns
|| 10-11 | | | ||
|| 11-12 | | | ||
|| 12-13 | | | ||
|| 13-14 | | | ||
|| 14-15 |(rowspan=3) CSCI 102 | CSCI 101 | CSCI 101 ||
|| 15-16 | | || <-- reduced by one column
|| 16-17 | | ||
|#


Mon Tue Wed Thu Fri
8-9 Outreach Outreach
9-10
10-11
11-12
12-13
13-14
14-15 CSCI 102 CSCI 101 CSCI 101
15-16
16-17

Spans are particularly useful to create subheadings:

#|
?| Fruit production in the last two years |?
*| |(colspan=2) Apples |(colspan=2) Pears |*
*| | 2025 | 2026 | 2025 | 2026 |*
^| Mary | 300Kg | 320Kg | 400kg | 280Kg ||
^| John | 400Kg | 630Kg | 210Kg | 300Kg ||
|#


Fruit production in the last two years
Apples Pears
2025 2026 2025 2026
Mary 300Kg 320Kg 400kg 280Kg
John 400Kg 630Kg 210Kg 300Kg

Column and row spans can be combined to created funky table layouts:

#|
||(colspan=2 rowspan=2) 2x2 |(colspan=2) 2x1 |(rowspan=2) 1x2 ||
||(rowspan=2) 1x2 | 1x1 ||
|| 1x1 | 1x1 |(colspan=2) 2x1 ||
|#


2x2 2x1 1x2
1x2 1x1
1x1 1x1 2x1

Formatting <!markup:1:begin>text within tables

<!markup:1:end> text===
You can use any kind of basic Wacko 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-- |(colspan=2) **//Bold italics//** ||
|#


Using text formatting within tables
Monospaced Italics Bold Underlined
Highlighted Strikethrough Bold italics

Actions and <!markup:1:begin>images within tables

<!markup:1:end> images===
Simple, content-generating actions (including images) can be added within table cells and headings.

#|
?| Using actions within tables |?
|| {{tagcloud}} ||
|| file:/wacko_logo.png ||
|| !!some colored text!! ||
|#


Using actions within tables
No assigned categories for this language.
WackoWiki
some colored text

===Links within tables===
===Links===
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:Unicode ||
|| Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] ||
|| External links: | http://www.example.com ||
|| Forced external links: | [[http://www.example.com Example.com]] ||
|| Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
|#


Adding links within tables
Camelcase links: SandBox
Escaped camelcase links: SandBox escaped
Forced links: main
Interwiki links: Wikipedia:Unicode
Forced interwiki links: Unicode article on Wikipedia
External links: http://www.example.com
Forced external links: Example.com
Image links:

===HTML within tables===
===HTML===
You can also use embedded HTML in table elements: 

#|
?| Embedding HTML within tables |?
|| Here's some superscript: a^^2+1^^ ||
|| And here's some subscript too: <!--markup:1:begin-->avv2kvv<!--markup:1:end--> <!--markup:2:begin-->a,,2k,,<!--markup:2:end--> ||
|| I love acronyms: (?WYTIWYG What You Think Is What You Get?) ||
|#


Embedding HTML within tables
Here's some superscript: a2+1
And here's some subscript too: avv2kvv a2k
I love acronyms: WYTIWYG

Styling

The table markup introduces a new style selector. 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 ||
|#


{background-color:red; color:white} 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! ||
|#


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!

You can also apply style to headings and captions:

#|
?|{border:1px dotted 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.||
|#


{border:1px dotted 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.

Please note that style parameters should always follow attribute parameters, when both are specified for an element (see the table markup reference):

#|
?| Give priority |?
<!--markup:1:begin-->||(x=2 y=2){background-color:pink}<!--markup:1:end-->
<!--markup:2:begin-->||(colspan=2 rowspan=2 bgcolor=pink)<!--markup:2:end--> 2x2 <!--markup:1:begin-->|(colspan=2){background-color:lightblue}<!--markup:1:end--> <!--markup:2:begin-->|(colspan=2 bgcolor=lightblue)<!--markup:2:end--> 2x1 <!--markup:1:begin-->|(rowspan=2){background-color:lightyellow}<!--markup:1:end--> <!--markup:2:begin-->|(rowspan=2 bgcolor=lightyellow)<!--markup:2:end--> 1x2 ||
<!--markup:1:begin-->||(rowspan=2){background-color:lightyellow}<!--markup:1:end-->
<!--markup:2:begin-->||(rowspan=2 bgcolor=lightyellow)<!--markup:2:end--> 1x2 <!--markup:1:begin-->|{background-color:#333;color:white} 1x1<!--markup:1:end--> <!--markup:2:begin-->|(bgcolor=darkslategray) !!(white)1x1!!<!--markup:2:end--> ||
<!--markup:1:begin-->||{background-color:lightblue} 1x1 |{background-color:#333;color:white}<!--markup:1:end-->
<!--markup:2:begin-->||(bgcolor=lightblue)<!--markup:2:end--> 1x1 <!--markup:1:begin-->|(colspan=2){background-color:pink}<!--markup:1:end--> <!--markup:2:begin-->|(bgcolor=darkslategray) !!(white)1x1!! |(colspan=2 bgcolor=pink)<!--markup:2:end--> 2x1 ||
|#


||(x=2 y=2){background-color:pink}||(colspan=2 rowspan=2 bgcolor=pink) 2x2 |(colspan=2){background-color:lightblue}|(colspan=2 bgcolor=lightblue) 2x1 |(rowspan=2){background-color:lightyellow}|(rowspan=2 bgcolor=lightyellow) 1x2 (rowspan=2){background-color:lightyellow}<!markup:1:end> ||(rowspan=2 bgcolor=lightyellow) 1x2 |{background-color:#333;color:white} 1x1|(bgcolor=darkslategray) 1x1{background-color:lightblue} 1x1 |{background-color:#333;color:white}<!markup:1:end> ||(bgcolor=lightblue) 1x1 |(colspan=2){background-color:pink}|(bgcolor=darkslategray) 1x1 |(colspan=2 bgcolor=pink) 2x1 (c:highlight)This cell uses the .highlight class (c:smaller)This cell uses the .smaller class (c:smaller){font-size:150%}This cell uses a .smaller class overridden by custom style settings Cell 1 Cell 2 Cell 3 (id=cell_1)This cell can be referred to by using the cell_1 id (id=cell_2)This cell can be referred to by using the cell_2 id
Give priority
<!markup:1:begin>
<!markup:1:begin>
#

Adding style through classes


You can apply existing classes from your stylesheet to any element using the class parameter (c:''class''). Note that custom style declarations specified through braced markup override class attributes.

The following example applies to table cells two class selectors defined in the stylesheet. The third row shows how to override a class selector with custom style attributes:

#|
?|Using class selectors to add style to table elements||
||(c:highlight)This cell uses the ##.highlight## class||
||(c:smaller)This cell uses the ##.smaller## class||
||(c:smaller){font-size:150%}This cell uses the ##.smaller## class overridden by custom style settings||
|#


#		 ? Using class selectors to add style to table elements ?
#

Global table attributes


Table-level attributes can be specified by adding at the beginning of the table the following element: !| |!, which is used as a container for global table attributes. For example, you can specify global style options for a table by adding them to this element:

#|
!|{border:3px solid blue; background-color: black; color: white; width: 300px; text-align: center}|!
||Cell 1||
||Cell 2||
||Cell 3||
|#


#		 ! {border:3px solid blue; background-color: black; color: white; width: 300px; text-align: center} !
#

Referring to elements: the id attribute


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 (id=''id'') parameter.

For example, the following markup creates a table with the id "main_table" containing two cells with id's "cell_1" and "cell_2"

#|
!|(id=main_table)|!
?|Using id to refer to table elements|?
||(id=cell_1)This cell can be referred to by using the ##cell_1## id||
||(id=cell_2)This cell can be referred to by using the ##cell_2## id||
|#


#		 ! (i:main_table) !
?		 Using id to refer to table elements ?
#

Accessibility options

Table head, table body and table foot


Rows in a table can be grouped in a table head, table body and table foot. This division enables browsers to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data. The table head and table foot should contain information about the table's columns. The table body should contain rows of table data.

Wikka allows you to create groups of rows with special markers:
  • The |[| marker groups the rows it precedes as a table head block;
  • The |]| marker groups the rows it precedes as a table foot block;
  • The |#| marker groups the rows it precedes as a table body;

The following example shows how to use these elements to create row groups. Note that Wikka uses different backgrounds to differentiate column headings in the table head and foot from row headings in the table body:

#|
!|{width: 400px}|!
?|Here's how you can group rows|?
|[|
*|Name|Place|Telephone|*
|]|
*|Name|Place|Telephone|*
|#|
^|John Smith|New York|555-1234||
^|Jane Smith|Los Angeles|555-2345||
^|John Doe|Unknown|Unknown||
^|Jane Doe|Unknown|Unknown||
|#


#		 ! {width: 400px} !
?		 Here's how you can group rows ?
 [ * Name Place Telephone *
 ] * Name Place Telephone *
 # John Smith New York 555-1234
Jane Smith Los Angeles 555-2345
John Doe Unknown Unknown
Jane Doe Unknown Unknown

Heading scope


To be semantically correct and accessible to users with non-visual browsers, headings should contain scope attributes describing the cell range they refer to.
  • Column heading scopes can be specified using the (scope=col) parameter in the corresponding column heading;
  • Row heading scopes can be specified using the (scope=row) parameter in the corresponding row heading;

The following example shows how to correctly add column and row scopes to a table to make it accessible:

#|
?|Table 1: Company data||
|[|
*| |(scope=col)Employees|(scope=col)Founded|*
|#|
^|(scope=row)ACME Inc|1000|1947||
^|(scope=row)XYZ Corp|2000|1973||
|#


|[|
Table 1: Company data
Employees Founded
| ^|(scope=row)ACME Inc|1000|1947||
^|(scope=row)XYZ Corp|2000|1973||
|#