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===