Table Markup Guide (diff) - SQLite Testing

Difference between revisions for Playground / Table Markup Guide

Merge of Version1 & Version2
1	As of ~~##6.2##~~!!(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
3	{{toc numerate=1}}
4
…	…
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: a~~vv2kvv~~,,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: a~~vv2kvv~~,,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\|