Difference between revisions for Playground / Table Markup Guide




← Previous edit
Next edit →

Version1 Version2 Differences
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 231 ||(y=2) 1x2 | 1x1 ||
232 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 238 ||(y=2) 1x2 | 1x1 ||
239 239 || 1x1 | 1x1 |(x=2) 2x1 ||
240 240 |#
317 317 #|
318 318 ?| Embedding HTML within tables |?
319 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 321 || I love acronyms: (?WYTIWYG What You Think Is What You Get?) ||
322 322 |#
323 323 %%
325 325 #|
326 326 ?| Embedding HTML within tables |?
327 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 329 || I love acronyms: (?WYTIWYG What You Think Is What You Get?) ||
330 330 |#
331 331
332 332 ===Adding a touch of style===
333 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 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|?
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||
  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 ||
406 406 |#
407 407
408 408 ===Adding style through classes===
470 470 |#
471 471
472 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 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 525 ?|Table 1: Company data||
551 526 |[|
552 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 535 ?|Table 1: Company data|?
562 536 |[|
563 537 *| |(o=col)Employees|(o=col)Founded|*