Difference between revisions for Playground / Table Markup Guide




← Previous edit
Next edit →

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  
227 227
228 %% 228 %%
229 #| 229 #|
230 ||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 || 230 ||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
231 ||(y=2) 1x2 | 1x1 || 231 ||(y=2) 1x2 | 1x1 ||
232 || 1x1 | 1x1 |(x=2) 2x1 || 232 || 1x1 | 1x1 |(x=2) 2x1 ||
233 |# 233 |#
234 %% 234 %%
235 235
236 #| 236 #|
237 ||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 || 237 ||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
238 ||(y=2) 1x2 | 1x1 || 238 ||(y=2) 1x2 | 1x1 ||
239 || 1x1 | 1x1 |(x=2) 2x1 || 239 || 1x1 | 1x1 |(x=2) 2x1 ||
240 |# 240 |#
293 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] || 293 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] ||
294 || External links: | http://www.example.com || 294 || External links: | http://www.example.com ||
295 || Forced external links: | [[http://www.example.com Example.com]] || 295 || Forced external links: | [[http://www.example.com Example.com]] ||
296 || Image links: | file:/Przewalski-horses.jpg?600 || 296 || Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
297 |# 297 |#
298 %% 298 %%
299 299
306 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] || 306 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] ||
307 || External links: | http://www.example.com || 307 || External links: | http://www.example.com ||
308 || Forced external links: | [[http://www.example.com Example.com]] || 308 || Forced external links: | [[http://www.example.com Example.com]] ||
309 || Image links: | file:/Przewalski-horses.jpg?600 || 309 || Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
310 |# 310 |#
311 311
312 ===Adding HTML within tables=== 312 ===Adding HTML within tables===
317 #| 317 #|
318 ?| Embedding HTML within tables |? 318 ?| Embedding HTML within tables |?
319 || Here's some superscript: a^^2+1^^ || 319 || Here's some superscript: a^^2+1^^ ||
320 || And here's some subscript too: avv2kvv || 320 || And here's some subscript too: a,,2k,, ||
321 || I love acronyms: (?WYTIWYG What You Think Is What You Get?) || 321 || I love acronyms: (?WYTIWYG What You Think Is What You Get?) ||
322 |# 322 |#
323 %% 323 %%
325 #| 325 #|
326 ?| Embedding HTML within tables |? 326 ?| Embedding HTML within tables |?
327 || Here's some superscript: a^^2+1^^ || 327 || Here's some superscript: a^^2+1^^ ||
328 || And here's some subscript too: avv2kvv || 328 || And here's some subscript too: a,,2k,, ||
329 || I love acronyms: (?WYTIWYG What You Think Is What You Get?) || 329 || I love acronyms: (?WYTIWYG What You Think Is What You Get?) ||
330 |# 330 |#
331 331
332 ===Adding a touch of style=== 332 ===Adding a touch of style===
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.: 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.:
334 ##""||""{''style options''}Element content""||""## 334 ##""||""{''style options''} Element content ""||""##
335 335
336 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:
337 337
391 391
392 %% 392 %%
393 #| 393 #|
394 ?|Give priority|? 394 ?| Give priority |?
395 ||(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 ||
396 ||(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 ||
397 ||{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 ||
398 |# 398 |#
399 %% 399 %%
400 400
401 #| 401 #|
402 ?|Give priority|? 402 ?| Give priority |?
403 ||(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 ||
404 ||(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 ||
405 ||{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 ||
406 |# 406 |#
407 407
408 ===Adding style through classes=== 408 ===Adding style through classes===
470 |# 470 |#
471 471
472 ===Accessibility options=== 472 ===Accessibility options===
473    
474 ====Adding titles====    
475      
476 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.    
477    
478 The following example adds titles to several table elements (you can hover over the table to display them):    
479    
480 %%    
481 #|    
482 !|(t="Comparative figures for fruit production in the last year"){width: 350px}|!    
483 ?|Fruit production in 2026|?    
484 *| |(t="yearly production of apples")Apples|(t="yearly production of pears")Pears|*    
485 ^|(t="Mary's contribution to 2026 production")Mary|(t="Mary's production of apples in 2026"){text-align:center}300Kg|(t="Mary's production of pears in 2026"){text-align:center}320Kg||    
486 ^|(t="John's contribution to 2026 production")John|(t="John's production of apples in 2026"){text-align:center}400Kg|(t="John's production of pears in 2026"){text-align:center}630Kg||    
487 |#    
488 %%    
489    
490 #|    
491 !|(t="Comparative figures for fruit production in the last year"){width: 350px}|!    
492 ?|Fruit production in 2026|?    
493 *| |(t="yearly production of apples")Apples|(t="yearly production of pears")Pears|*    
494 ^|(t="Mary's contribution to 2026 production")Mary|(t="Mary's production of apples in 2026"){text-align:center}300Kg|(t="Mary's production of pears in 2026"){text-align:center}320Kg||    
495 ^|(t="John's contribution to 2026 production")John|(t="John's production of apples in 2026"){text-align:center}400Kg|(t="John's production of pears in 2026"){text-align:center}630Kg||    
496 |#    
497 473
498 ====Table head, table body and table foot==== 474 ====Table head, table body and table foot====
499 475
546 522
547 %% 523 %%
548 #| 524 #|
549 !|(u:The number of employees and the foundation year of some imaginary companies.)|!    
550 ?|Table 1: Company data|| 525 ?|Table 1: Company data||
551 |[| 526 |[|
552 *| |(o=col)Employees|(o=col)Founded|* 527 *| |(o=col)Employees|(o=col)Founded|*
557 %% 532 %%
558 533
559 #| 534 #|
560 !|(u:The number of employees and the foundation year of some imaginary companies.)|!    
561 ?|Table 1: Company data|? 535 ?|Table 1: Company data|?
562 |[| 536 |[|
563 *| |(o=col)Employees|(o=col)Founded|* 537 *| |(o=col)Employees|(o=col)Founded|*