Difference between revisions for Playground / Table Markup Guide




← Previous edit
Revision 2 as of 02/25/2026 14:10 ▼
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

(17.6 KiB)
WikiAdmin
 Next edit →
Revision 15 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 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

(15.4 KiB) -2,213
WikiAdmin

Version1 Version2
1 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. 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 {{toc numerate=1}} 3 {{toc numerate=1}}
4 4  
5 ===Table basics: cells, rows, columns=== 5 ===Table basics===
    6 ====Cells====
6 7
7 The most basic element of a table is a **cell**. Single cells can be created using the standard delimiter ##""||""##, e.g.: 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 Note that a cell must always be open and closed by delimiters. 20 Note that a cell must always be open and closed by delimiters.
20 21
    22 ====Rows====
    23
21 **Rows** can be created by adding on the same line multiple cells: 24 **Rows** can be created by adding on the same line multiple cells:
22 25
23 %% 26 %%
… … … …
29 #| 32 #|
30 || Cell 1 | Cell 2 | Cell 3 || 33 || Cell 1 | Cell 2 | Cell 3 ||
31 |# 34 |#
    35
    36 ====Columns====
32 37
33 **Columns** can be created by adding rows on separate lines: 38 **Columns** can be created by adding rows on separate lines:
34 39
… … … …
63 |# 68 |#
64 69
65 ===Headings=== 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. 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.
67 72
68 The following is an example of a simple table with **column headings**: 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 || 300Kg | 480Kg || 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 *| | Apples | Pears |* 126 *| | Apples | Pears |*
122 ^| Mary | 300Kg | 320Kg || 127 ^| Mary | 300Kg | 320Kg ||
123 ^| John | 400Kg | 630Kg || 128 ^| John | 400Kg | 630Kg ||
… … … …
125 %% 130 %%
126 131
127 #| 132 #|
128 ?| Fruit production in 2006 |? 133 ?| Fruit production in 2026 |?
129 *| | Apples | Pears |* 134 *| | Apples | Pears |*
130 ^| Mary | 300Kg | 320Kg || 135 ^| Mary | 300Kg | 320Kg ||
131 ^| John | 400Kg | 630Kg || 136 ^| John | 400Kg | 630Kg ||
… … … …
173 %% 178 %%
174 #| 179 #|
175 *| | Mon | Tue | Wed | Thu | Fri |* 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 || 9-10 | | | || <-- reduced by two columns 182 || 9-10 | | | || <-- reduced by two columns
178 || 10-11 | | | || 183 || 10-11 | | | ||
179 || 11-12 | | | || 184 || 11-12 | | | ||
180 || 12-1 | | | || 185 || 12-13 | | | ||
181 || 1-2 | | | || 186 || 13-14 | | | ||
182 || 2-3 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 || 187 || 14-15 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
183 || 3-4 | | || <-- reduced by one column 188 || 15-16 | | || <-- reduced by one column
184 || 4-5 | | || 189 || 16-17 | | ||
185 |# 190 |#
186 %% 191 %%
187 192
188 #| 193 #|
189 *| | Mon | Tue | Wed | Thu | Fri |* 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 || 9-10 | | | || 196 || 9-10 | | | ||
192 || 10-11 | | | || 197 || 10-11 | | | ||
193 || 11-12 | | | || 198 || 11-12 | | | ||
194 || 12-1 | | | || 199 || 12-13 | | | ||
195 || 1-2 | | | || 200 || 13-14 | | | ||
196 || 2-3 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 || 201 || 14-15 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
197 || 3-4 | | || 202 || 15-16 | | ||
198 || 4-5 | | || 203 || 16-17 | | ||
199 |# 204 |#
200 205
201 Spans are particularly useful to create **subheadings**: 206 Spans are particularly useful to create **subheadings**:
… … … …
204 #| 209 #|
205 ?| Fruit production in the last two years |? 210 ?| Fruit production in the last two years |?
206 *| |(x=2) Apples |(x=2) Pears |* 211 *| |(x=2) Apples |(x=2) Pears |*
207 *| | 2005 | 2006 | 2005 | 2006 |* 212 *| | 2025 | 2026 | 2025 | 2026 |*
208 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg || 213 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg ||
209 ^| John | 400Kg | 630Kg | 210Kg | 300Kg || 214 ^| John | 400Kg | 630Kg | 210Kg | 300Kg ||
210 |# 215 |#
… … … …
213 #| 218 #|
214 ?| Fruit production in the last two years |? 219 ?| Fruit production in the last two years |?
215 *| |(x=2) Apples |(x=2) Pears |* 220 *| |(x=2) Apples |(x=2) Pears |*
216 *| | 2005 | 2006 | 2005 | 2006 |* 221 *| | 2025 | 2026 | 2025 | 2026 |*
217 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg || 222 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg ||
218 ^| John | 400Kg | 630Kg | 210Kg | 300Kg || 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 ||(y=2) 1x2 | 1x1 || 231 ||(y=2) 1x2 | 1x1 ||
227 || 1x1 | 1x1 |(x=2) 2x1 || 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 ||(y=2) 1x2 | 1x1 || 238 ||(y=2) 1x2 | 1x1 ||
234 || 1x1 | 1x1 |(x=2) 2x1 || 239 || 1x1 | 1x1 |(x=2) 2x1 ||
235 |# 240 |#
… … … …
283 ?| Adding links within tables |? 288 ?| Adding links within tables |?
284 || Camelcase links: | SandBox || 289 || Camelcase links: | SandBox ||
285 || Escaped camelcase links: | ~SandBox escaped || 290 || Escaped camelcase links: | ~SandBox escaped ||
286 || Forced links: | [[HomePage main]] || 291 || Forced links: | [[/HomePage main]] ||
287 || Interwiki links: | Wikipedia:Unicode || 292 || Interwiki links: | Wikipedia:Unicode ||
288 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] || 293 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] ||
289 || External links: | http://www.example.com || 294 || External links: | http://www.example.com ||
290 || Forced external links: | [[http://www.example.com Example.com]] || 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 ?| Adding links within tables |? 301 ?| Adding links within tables |?
297 || Camelcase links: | SandBox || 302 || Camelcase links: | SandBox ||
298 || Escaped camelcase links: | ~SandBox escaped || 303 || Escaped camelcase links: | ~SandBox escaped ||
299 || Forced links: | [[HomePage main]] || 304 || Forced links: | [[/HomePage main]] ||
300 || Interwiki links: | Wikipedia:Unicode || 305 || Interwiki links: | Wikipedia:Unicode ||
301 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] || 306 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] ||
302 || External links: | http://www.example.com || 307 || External links: | http://www.example.com ||
303 || Forced external links: | [[http://www.example.com Example.com]] || 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 ===Adding HTML within tables=== 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 #|
… … … …
326 331
327 ===Adding a touch of style=== 332 ===Adding a touch of style===
328 The table markup introduces a new [[TableMarkupReference style selector]]. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.: 333 The table markup introduces a new [[TableMarkupReference style selector]]. CSS style options can be added to any element by enclosing them within **single braces**, right before the element content, e.g.:
329 ##""||""{''style options''}Element content""||""## 334 ##""||""{''style options''} Element content ""||""##
330 335
331 For example, to render a cell with **red background** and **white text color**, you can do the following: 336 For example, to render a cell with **red background** and **white text color**, you can do the following:
332 337
… … … …
386 391
387 %% 392 %%
388 #| 393 #|
389 ?|Give priority|? 394 ?| Give priority |?
390 ||(x=2;y=2){background-color:pink}2x2|(x=2){background-color:lightblue}2x1|(y=2){background-color:lightyellow}1x2|| 395 ||(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|| 396 ||(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|| 397 ||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(x=2){background-color:pink} 2x1 ||
393 |# 398 |#
394 %% 399 %%
395 400
396 #| 401 #|
397 ?|Give priority|? 402 ?| Give priority |?
398 ||(x=2;y=2){background-color:pink}2x2|(x=2){background-color:lightblue}2x1|(y=2){background-color:lightyellow}1x2|| 403 ||(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|| 404 ||(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|| 405 ||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(x=2){background-color:pink} 2x1 ||
401 |# 406 |#
402 407
403 ===Adding style through classes=== 408 ===Adding style through classes===
… … … …
444 449
445 ===Referring to elements: the ##id## attribute=== 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 For example, the following markup creates a table with the ##id## "main_table" containing two cells with ##id##'s "cell_1" and "cell_2" 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 !|(i:main_table)|! 466 !|(i:main_table)|!
454 ?|Using id to refer to table elements|? 467 ?|Using id to refer to table elements|?
455 ||(i:cell_1)This cell can be referred to by using the ##cell_1## id|| 468 ||(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|| 469 ||(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||    
465 |# 470 |#
466 471
467 ===Accessibility options=== 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 ====Table head, table body and table foot==== 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 ?|Here's how you can group rows|? 488 ?|Here's how you can group rows|?
516 |[| 489 |[|
517 *|Name|Place|Telephone|* 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 ?|Here's how you can group rows|? 503 ?|Here's how you can group rows|?
531 |[| 504 |[|
532 *|Name|Place|Telephone|* 505 *|Name|Place|Telephone|*
… … … …
542 ====Heading scope==== 515 ====Heading scope====
543 516
544 To be semantically correct and accessible to users with non-visual browsers, headings should contain scope attributes describing the cell range they refer to. 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; 518   * 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; 519   * Row heading scopes can be specified using the ##(o=row)## parameter in the corresponding row heading;
547 520
548 The following example shows how to correctly add column and row scopes to a table to make it accessible: 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 ?|Table 1: Company data|| 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|| 529 ^|(o=row)ACME Inc|1000|1947||
558 ^|(o:row)XYZ Corp|2000|1973|| 530 ^|(o=row)XYZ Corp|2000|1973||
559 |# 531 |#
560 %% 532 %%
561 533
562 #| 534 #|
563 !|(u:The number of employees and the foundation year of some imaginary companies.)|!    
564 ?|Table 1: Company data|? 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|| 539 ^|(o=row)ACME Inc|1000|1947||
569 ^|(o:row)XYZ Corp|2000|1973|| 540 ^|(o=row)XYZ Corp|2000|1973||
570 |# 541 |#
571 542