Difference between revisions for Playground / Table Markup Guide




← Previous edit
Next edit →

Version1 Version2
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 |#
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===
522 522
523 %% 523 %%
524 #| 524 #|
525 !|(u:The number of employees and the foundation year of some imaginary companies.)|!    
526 ?|Table 1: Company data|| 525 ?|Table 1: Company data||
527 |[| 526 |[|
528 *| |(o=col)Employees|(o=col)Founded|* 527 *| |(o=col)Employees|(o=col)Founded|*
533 %% 532 %%
534 533
535 #| 534 #|
536 !|(u:The number of employees and the foundation year of some imaginary companies.)|!    
537 ?|Table 1: Company data|? 535 ?|Table 1: Company data|?
538 |[| 536 |[|
539 *| |(o=col)Employees|(o=col)Founded|* 537 *| |(o=col)Employees|(o=col)Founded|*