Difference between revisions for Playground / Table Markup Guide




← Previous edit
Revision 6 as of 02/25/2026 18:07 ▼
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

(17.6 KiB)
WikiAdmin
 Next edit →
Revision 14 as of 02/27/2026 17:41 ▼
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 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

(15.4 KiB) -2,220
WikiAdmin

Version1 Version2 Differences
1   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.
  1 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.
2 2
3 3 {{toc numerate=1}}
4 4  
5   ===Table basics: cells, rows, columns===
  5 ===Table basics===
  6 ====Cells====
6 7
7 8 The most basic element of a table is a **cell**. Single cells can be created using the standard delimiter ##""||""##, e.g.:
8 9
… … …
18 19
19 20 Note that a cell must always be open and closed by delimiters.
20 21
  22 ====Rows====  
  23  
21 24 **Rows** can be created by adding on the same line multiple cells:
22 25
23 26 %%
… … …
29 32 #|
30 33 || Cell 1 | Cell 2 | Cell 3 ||
31 34 |#
  35  
  36 ====Columns====  
32 37
33 38 **Columns** can be created by adding rows on separate lines:
34 39
… … …
63 68 |#
64 69
65 70 ===Headings===
66   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.
67  
68   The following is an example of a simple table with **column headings**:
  71 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.
  72
  73 The following is an example of a simple table with **column headings**, they must be terminated at the end of the row with the ##|*## :
69 74
70 75 %%
71 76 #|
… … …
79 84 || 300Kg | 480Kg ||
80 85 |#
81 86
82   **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:
  87 **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:
83 88
84 89 %%
85 90 #|
… … …
117 122
118 123 %%
119 124 #|
120   ?| Fruit production in 2006 |?
  125 ?| Fruit production in 2026 |?
121 126 *| | Apples | Pears |*
122 127 ^| Mary | 300Kg | 320Kg ||
123 128 ^| John | 400Kg | 630Kg ||
… … …
125 130 %%
126 131
127 132 #|
128   ?| Fruit production in 2006 |?
  133 ?| Fruit production in 2026 |?
129 134 *| | Apples | Pears |*
130 135 ^| Mary | 300Kg | 320Kg ||
131 136 ^| John | 400Kg | 630Kg ||
… … …
173 178 %%
174 179 #|
175 180 *| | Mon | Tue | Wed | Thu | Fri |*
176   || 8-9 | |(y=9) Outreach| |(y=9) Outreach | ||
  181 || 8-9 | |(y=9) Outreach | |(y=9) Outreach | ||
177 182 || 9-10 | | | || <-- reduced by two columns
178 183 || 10-11 | | | ||
179 184 || 11-12 | | | ||
180   || 12-1 | | | ||
181   || 1-2 | | | ||
182   || 2-3 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
183   || 3-4 | | || <-- reduced by one column
184   || 4-5 | | ||
  185 || 12-13 | | | ||
  186 || 13-14 | | | ||
  187 || 14-15 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
  188 || 15-16 | | || <-- reduced by one column
  189 || 16-17 | | ||
185 190 |#
186 191 %%
187 192
188 193 #|
189 194 *| | Mon | Tue | Wed | Thu | Fri |*
190   || 8-9 | |(y=9) Outreach| |(y=9) Outreach | ||
  195 || 8-9 | |(y=9) Outreach | |(y=9) Outreach | ||
191 196 || 9-10 | | | ||
192 197 || 10-11 | | | ||
193 198 || 11-12 | | | ||
194   || 12-1 | | | ||
195   || 1-2 | | | ||
196   || 2-3 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
197   || 3-4 | | ||
198   || 4-5 | | ||
  199 || 12-13 | | | ||
  200 || 13-14 | | | ||
  201 || 14-15 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
  202 || 15-16 | | ||
  203 || 16-17 | | ||
199 204 |#
200 205
201 206 Spans are particularly useful to create **subheadings**:
… … …
204 209 #|
205 210 ?| Fruit production in the last two years |?
206 211 *| |(x=2) Apples |(x=2) Pears |*
207   *| | 2005 | 2006 | 2005 | 2006 |*
  212 *| | 2025 | 2026 | 2025 | 2026 |*
208 213 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg ||
209 214 ^| John | 400Kg | 630Kg | 210Kg | 300Kg ||
210 215 |#
… … …
213 218 #|
214 219 ?| Fruit production in the last two years |?
215 220 *| |(x=2) Apples |(x=2) Pears |*
216   *| | 2005 | 2006 | 2005 | 2006 |*
  221 *| | 2025 | 2026 | 2025 | 2026 |*
217 222 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg ||
218 223 ^| John | 400Kg | 630Kg | 210Kg | 300Kg ||
219 224 |#
… … …
222 227
223 228 %%
224 229 #|
225   ||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
  230 ||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
226 231 ||(y=2) 1x2 | 1x1 ||
227 232 || 1x1 | 1x1 |(x=2) 2x1 ||
228 233 |#
229 234 %%
230 235
231 236 #|
232   ||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
  237 ||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
233 238 ||(y=2) 1x2 | 1x1 ||
234 239 || 1x1 | 1x1 |(x=2) 2x1 ||
235 240 |#
… … …
283 288 ?| Adding links within tables |?
284 289 || Camelcase links: | SandBox ||
285 290 || Escaped camelcase links: | ~SandBox escaped ||
286   || Forced links: | [[HomePage main]] ||
  291 || Forced links: | [[/HomePage main]] ||
287 292 || Interwiki links: | Wikipedia:Unicode ||
288 293 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] ||
289 294 || External links: | http://www.example.com ||
290 295 || Forced external links: | [[http://www.example.com Example.com]] ||
291   || Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
  296 || Image links: | file:/Przewalski-horses.jpg?600 ||
292 297 |#
293 298 %%
294 299
… … …
296 301 ?| Adding links within tables |?
297 302 || Camelcase links: | SandBox ||
298 303 || Escaped camelcase links: | ~SandBox escaped ||
299   || Forced links: | [[HomePage main]] ||
  304 || Forced links: | [[/HomePage main]] ||
300 305 || Interwiki links: | Wikipedia:Unicode ||
301 306 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] ||
302 307 || External links: | http://www.example.com ||
303 308 || Forced external links: | [[http://www.example.com Example.com]] ||
304   || Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
  309 || Image links: | file:/Przewalski-horses.jpg?600 ||
305 310 |#
306 311
307 312 ===Adding HTML within tables===
308 313
309   You can also use [[Docs:UsingHTML embedded HTML]] in table elements:
  314 You can also use [[Docs:UsingHTML embedded HTML]] in table elements:
310 315
311 316 %%
312 317 #|
… … …
386 391
387 392 %%
388 393 #|
389   ?|Give priority|?
390   ||(x=2;y=2){background-color:pink}2x2|(x=2){background-color:lightblue}2x1|(y=2){background-color:lightyellow}1x2||
391   ||(y=2){background-color:lightyellow}1x2|{background-color:#333;color:white}1x1||
392   ||{background-color:lightblue}1x1|{background-color:#333;color:white}1x1|(x=2){background-color:pink}2x1||
393   |#
394   %%
395  
396   #|
397   ?|Give priority|?
398   ||(x=2;y=2){background-color:pink}2x2|(x=2){background-color:lightblue}2x1|(y=2){background-color:lightyellow}1x2||
399   ||(y=2){background-color:lightyellow}1x2|{background-color:#333;color:white}1x1||
400   ||{background-color:lightblue}1x1|{background-color:#333;color:white}1x1|(x=2){background-color:pink}2x1||
  394 ?| Give priority |?
  395 ||(x=2 y=2){background-color:pink} 2x2 |(x=2){background-color:lightblue} 2x1 |(y=2){background-color:lightyellow} 1x2 ||
  396 ||(y=2){background-color:lightyellow} 1x2 |{background-color:#333;color:white} 1x1 ||
  397 ||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(x=2){background-color:pink} 2x1 ||
  398 |#
  399 %%
  400
  401 #|
  402 ?| Give priority |?
  403 ||(x=2 y=2){background-color:pink} 2x2 |(x=2){background-color:lightblue} 2x1 |(y=2){background-color:lightyellow} 1x2 ||
  404 ||(y=2){background-color:lightyellow} 1x2 |{background-color:#333;color:white} 1x1 ||
  405 ||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(x=2){background-color:pink} 2x1 ||
401 406 |#
402 407
403 408 ===Adding style through classes===
… … …
444 449
445 450 ===Referring to elements: the ##id## attribute===
446 451
447   ##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.
  452 ##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.
448 453
449 454 For example, the following markup creates a table with the ##id## "main_table" containing two cells with ##id##'s "cell_1" and "cell_2"
450 455
451 456 %%
  457 #|  
  458 !|(i=main_table)|!  
  459 ?|Using id to refer to table elements|?  
  460 ||(i=cell_1)This cell can be referred to by using the ##cell_1## id||  
  461 ||(i=cell_2)This cell can be referred to by using the ##cell_2## id||  
  462 |#  
  463 %%  
  464  
452 465 #|
453 466 !|(i:main_table)|!
454 467 ?|Using id to refer to table elements|?
455   ||(i:cell_1)This cell can be referred to by using the ##cell_1## id||
456   ||(i:cell_2)This cell can be referred to by using the ##cell_2## id||
457   |#
458   %%
459  
460   #|
461   !|(i:main_table)|!
462   ?|Using id to refer to table elements|?
463   ||(i:cell_1)This cell can be referred to by using the ##cell_1## id||
464   ||(i:cell_2)This cell can be referred to by using the ##cell_2## id||
  468 ||(i=cell_1)This cell can be referred to by using the ##cell_1## id||
  469 ||(i=cell_2)This cell can be referred to by using the ##cell_2## id||
465 470 |#
466 471
467 472 ===Accessibility options===
468    
469   ====Adding titles====  
470    
471   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.  
472    
473   The following example adds titles to several table elements (you can hover over the table to display them):  
474    
475   %%  
476   #|  
477   !|(t:Comparative figures for fruit production in the last year){width: 350px}|!  
478   ?|Fruit production in 2006|?  
479   *| |(t:yearly production of apples)Apples|(t:yearly production of pears)Pears|*  
480   ^|(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||  
481   ^|(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||  
482   |#  
483   %%  
484    
485   #|  
486   !|(t:Comparative figures for fruit production in the last year){width: 350px}|!  
487   ?|Fruit production in 2006|?  
488   *| |(t:yearly production of apples)Apples|(t:yearly production of pears)Pears|*  
489   ^|(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||  
490   ^|(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||  
491   |#  
492    
493   ====Adding a summary====  
494    
495   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.  
496    
497   For example, the following line:  
498   ##""!|(u:This is a summary)|!""##  
499   will add to the table a ##summary## attribute with the value ##This is a summary##.  
500 473
501 474 ====Table head, table body and table foot====
502 475
… … …
511 484
512 485 %%
513 486 #|
514   !|(u:A table with summary, caption, head, foot and body){width: 400px}|!
  487 !|{width: 400px}|!
515 488 ?|Here's how you can group rows|?
516 489 |[|
517 490 *|Name|Place|Telephone|*
… … …
526 499 %%
527 500
528 501 #|
529   !|(u:A table with summary, caption, head, foot and body){width: 400px}|!
  502 !|{width: 400px}|!
530 503 ?|Here's how you can group rows|?
531 504 |[|
532 505 *|Name|Place|Telephone|*
… … …
542 515 ====Heading scope====
543 516
544 517 To be semantically correct and accessible to users with non-visual browsers, headings should contain scope attributes describing the cell range they refer to.
545     * Column heading scopes can be specified using the ##(o:col)## parameter in the corresponding column heading;
546     * Row heading scopes can be specified using the ##(o:row)## parameter in the corresponding row heading;
  518   * Column heading scopes can be specified using the ##(o=col)## parameter in the corresponding column heading;
  519   * Row heading scopes can be specified using the ##(o=row)## parameter in the corresponding row heading;
547 520
548 521 The following example shows how to correctly add column and row scopes to a table to make it accessible:
549 522
550 523 %%
551 524 #|
552   !|(u:The number of employees and the foundation year of some imaginary companies.)|!  
553 525 ?|Table 1: Company data||
554 526 |[|
555   *| |(o:col)Employees|(o:col)Founded|*
  527 *| |(o=col)Employees|(o=col)Founded|*
556 528 |#|
557   ^|(o:row)ACME Inc|1000|1947||
558   ^|(o:row)XYZ Corp|2000|1973||
559   |#
560   %%
561  
562   #|
563   !|(u:The number of employees and the foundation year of some imaginary companies.)|!
  529 ^|(o=row)ACME Inc|1000|1947||
  530 ^|(o=row)XYZ Corp|2000|1973||
  531 |#
  532 %%
  533
  534 #|
564 535 ?|Table 1: Company data|?
565 536 |[|
566   *| |(o:col)Employees|(o:col)Founded|*
  537 *| |(o=col)Employees|(o=col)Founded|*
567 538 |#|
568   ^|(o:row)ACME Inc|1000|1947||
569   ^|(o:row)XYZ Corp|2000|1973||
570   |#
571  
  539 ^|(o=row)ACME Inc|1000|1947||
  540 ^|(o=row)XYZ Corp|2000|1973||
  541 |#
  542