Difference between revisions for Playground / Table Markup Guide




← Previous edit
Revision 9 as of 02/27/2026 15:08 ▼
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 2 02/25/2026 14:10 WikiAdmin 1 02/25/2026 14:06 WikiAdmin

(17.1 KiB)
WikiAdmin
 Next edit →
Revision 16 as of 02/28/2026 07:00 ▼
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

(15.4 KiB) -1,759
WikiAdmin

Merge of Version1 & Version2
227
228 %%
229 #|
230 ||(x=2; y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
231 ||(y=2) 1x2 | 1x1 ||
232 || 1x1 | 1x1 |(x=2) 2x1 ||
233 |#
234 %%
235
236 #|
237 ||(x=2; y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 ||
238 ||(y=2) 1x2 | 1x1 ||
239 || 1x1 | 1x1 |(x=2) 2x1 ||
240 |#
… …
317 #|
318 ?| Embedding HTML within tables |?
319 || Here's some superscript: a^^2+1^^ ||
320 || And here's some subscript too: avv2kvv,,2k,, ||
321 || I love acronyms: (?WYTIWYG What You Think Is What You Get?) ||
322 |#
323 %%
… …
325 #|
326 ?| Embedding HTML within tables |?
327 || Here's some superscript: a^^2+1^^ ||
328 || And here's some subscript too: avv2kvv,,2k,, ||
329 || I love acronyms: (?WYTIWYG What You Think Is What You Get?) ||
330 |#
331
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.:
334 ##""||""{''style options''}Element content Element content ""||""##
335
336 For example, to render a cell with **red background** and **white text color**, you can do the following:
337
… …
391
392 %%
393 #|
394 ?|Give priority Give priority |?
395 ||(x=2;y=2){background-color:pink}2x2|(x=2){background-color:lightblue}2x1|(y=2){background-color:lightyellow}1x2 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 1x2 |{background-color:#333;color:white} 1x1 ||
397 ||{background-color:lightblue}1x1|{background-color:#333;color:white}1x1|(x=2){background-color:pink}2x1 1x1 |{background-color:#333;color:white} 1x1 |(x=2){background-color:pink} 2x1 ||
398 |#
399 %%
400
401 #|
402 ?|Give priority Give priority |?
403 ||(x=2;y=2){background-color:pink}2x2|(x=2){background-color:lightblue}2x1|(y=2){background-color:lightyellow}1x2 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 1x2 |{background-color:#333;color:white} 1x1 ||
405 ||{background-color:lightblue}1x1|{background-color:#333;color:white}1x1|(x=2){background-color:pink}2x1 1x1 |{background-color:#333;color:white} 1x1 |(x=2){background-color:pink} 2x1 ||
406 |#
407
408 ===Adding style through classes===
… …
470 |#
471
472 ===Accessibility options===
473
474 ====Table head, table body and table foot====
475
… …
522
523 %%
524 #|
525 ?|Table 1: Company data||
526 |[|
527 *| |(o=col)Employees|(o=col)Founded|*
… …
532 %%
533
534 #|
535 ?|Table 1: Company data|?
536 |[|
537 *| |(o=col)Employees|(o=col)Founded|*