Difference between revisions for Playground / Table Markup Guide




← Previous edit
Revision 9 as of 02/27/2026 15:08 ▼
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 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 19 as of 03/01/2026 08:06 ▼
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.6 KiB) -1,545
WikiAdmin

Version1 Version2 Differences
1 1 As of **!!(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  
  2  
3 3 {{toc numerate=1}}
4    
  4
5 5 ===Table basics===
6 6 ====Cells====
7 7
… … …
136 136 ^| John | 400Kg | 630Kg ||
137 137 |#
138 138
139   ===Spans===
140   **Spans** are used to combine multiple cells or multiple headings vertically or horizontally and are created using the following [[TableMarkupReference attribute parameters]]:
141  
142   ##""||""(''span options'')Element content""||""##
143  
144   A **cell spanning multiple columns** is generated by prefixing the cell content with a ##(x=''n'')## parameter, where ##''n''## is the number of columns to be spanned. The following example shows how to create a cell spanning two columns:
145  
146   %%
147   #|
148   ||(x=2) Cell spanning 2 columns | Cell 3 ||
  139 ===Cell Spans===
  140 **Cell spans** are used to combine multiple cells or multiple headings vertically or horizontally and are created using the following [[TableMarkupReference attribute parameters]]:
  141
  142 ##""||""(''span options'') Element content ""||""##
  143
  144 A **cell spanning multiple columns** is generated by prefixing the cell content with a ##(colspan=''n'')## parameter, where ##''n''## is the number of columns to be spanned. The following example shows how to create a cell spanning two columns:
  145
  146 %%
  147 #|
  148 ||(colspan=2) Cell spanning 2 columns | Cell 3 ||
149 149 || Cell 4 | Cell 5 | Cell 6 ||
150 150 || Cell 7 | Cell 8 | Cell 9 ||
151 151 |#
152 152 %%
153 153
154 154 #|
155   ||(x=2) Cell spanning 2 columns | Cell 3 ||
  155 ||(colspan=2) Cell spanning 2 columns | Cell 3 ||
156 156 || Cell 4 | Cell 5 | Cell 6 ||
157 157 || Cell 7 | Cell 8 | Cell 9 ||
158 158 |#
159 159
160   Spans can also be applied to rows. A **cell spanning multiple rows** is generated by prefixing the cell content with a ##(y=''n'')## parameter, where ##''n''## is the number of rows to be spanned. The following example shows how to create a cell spanning two rows:
161  
162   %%
163   #|
164   ||(y=2) Cell spanning 2 rows | Cell 2 | Cell 3 ||
  160 Spans can also be applied to rows. A **cell spanning multiple rows** is generated by prefixing the cell content with a ##(rowspan=''n'')## parameter, where ##''n''## is the number of rows to be spanned. The following example shows how to create a cell spanning two rows:
  161
  162 %%
  163 #|
  164 ||(rowspan=2) Cell spanning 2 rows | Cell 2 | Cell 3 ||
165 165 || Cell 5 | Cell 6 ||
166 166 || Cell 7 | Cell 8 | Cell 9 ||
167 167 |#
168 168 %%
169 169
170 170 #|
171   ||(y=2) Cell spanning 2 rows | Cell 2 | Cell 3||
  171 ||(rowspan=2) Cell spanning 2 rows | Cell 2 | Cell 3 ||
172 172 || Cell 5 | Cell 6 ||
173 173 || Cell 7 | Cell 8 | Cell 9 ||
174 174 |#
… … …
178 178 %%
179 179 #|
180 180 *| | Mon | Tue | Wed | Thu | Fri |*
181   || 8-9 | |(y=9) Outreach | |(y=9) Outreach | ||
  181 || 8-9 | |(rowspan=9) Outreach | |(rowspan=9) Outreach | ||
182 182 || 9-10 | | | || <-- reduced by two columns
183 183 || 10-11 | | | ||
184 184 || 11-12 | | | ||
185 185 || 12-13 | | | ||
186 186 || 13-14 | | | ||
187   || 14-15 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
  187 || 14-15 |(rowspan=3) CSCI 102 | CSCI 101 | CSCI 101 ||
188 188 || 15-16 | | || <-- reduced by one column
189 189 || 16-17 | | ||
190 190 |#
… … …
192 192
193 193 #|
194 194 *| | Mon | Tue | Wed | Thu | Fri |*
195   || 8-9 | |(y=9) Outreach | |(y=9) Outreach | ||
  195 || 8-9 | |(rowspan=9) Outreach | |(rowspan=9) Outreach | ||
196 196 || 9-10 | | | ||
197 197 || 10-11 | | | ||
198 198 || 11-12 | | | ||
199 199 || 12-13 | | | ||
200 200 || 13-14 | | | ||
201   || 14-15 |(y=3) CSCI 102 | CSCI 101 | CSCI 101 ||
  201 || 14-15 |(rowspan=3) CSCI 102 | CSCI 101 | CSCI 101 ||
202 202 || 15-16 | | ||
203 203 || 16-17 | | ||
204 204 |#
… … …
208 208 %%
209 209 #|
210 210 ?| Fruit production in the last two years |?
211   *| |(x=2) Apples |(x=2) Pears |*
  211 *| |(colspan=2) Apples |(colspan=2) Pears |*
212 212 *| | 2025 | 2026 | 2025 | 2026 |*
213 213 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg ||
214 214 ^| John | 400Kg | 630Kg | 210Kg | 300Kg ||
… … …
217 217
218 218 #|
219 219 ?| Fruit production in the last two years |?
220   *| |(x=2) Apples |(x=2) Pears |*
  220 *| |(colspan=2) Apples |(colspan=2) Pears |*
221 221 *| | 2025 | 2026 | 2025 | 2026 |*
222 222 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg ||
223 223 ^| John | 400Kg | 630Kg | 210Kg | 300Kg ||
… … …
227 227
228 228 %%
229 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   |#
241  
242  
243   ===Formatting text within tables===
  230 ||(colspan=2 rowspan=2) 2x2 |(colspan=2) 2x1 |(rowspan=2) 1x2 ||
  231 ||(rowspan=2) 1x2 | 1x1 ||
  232 || 1x1 | 1x1 |(colspan=2) 2x1 ||
  233 |#
  234 %%
  235
  236 #|
  237 ||(colspan=2 rowspan=2) 2x2 |(colspan=2) 2x1 |(rowspan=2) 1x2 ||
  238 ||(rowspan=2) 1x2 | 1x1 ||
  239 || 1x1 | 1x1 |(colspan=2) 2x1 ||
  240 |#
  241
  242
  243 ===Formatting text===
244 244
245 245 You can use any kind of basic [[wackowiki:Doc/English/Formatting Wacko markup]] to render text within tables.
246 246 The following example adds basic formatting to cell content:
… … …
249 249 #|
250 250 ?| Using text formatting within tables |?
251 251 || ##Monospaced## | //Italics// | **Bold** | __Underlined__ ||
252   || !!Highlighted!! | --Strikethrough-- |(x=2) **//Bold italics//** ||
  252 || !!Highlighted!! | --Strikethrough-- |(colspan=2) **//Bold italics//** ||
253 253 |#
254 254 %%
255 255
256 256 #|
257 257 ?| Using text formatting within tables |?
258 258 || ##Monospaced## | //Italics// | **Bold** | __Underlined__ ||
259   || !!Highlighted!! | --Strikethrough-- |(x=2) **//Bold italics//** ||
260   |#
261  
262   ===Adding actions and images within tables===
  259 || !!Highlighted!! | --Strikethrough-- |(colspan=2) **//Bold italics//** ||
  260 |#
  261
  262 ===Actions and images===
263 263
264 264 Simple, content-generating [[Docs:UsingActions actions]] (including [[Docs:AddingImages images]]) can be added within table cells and headings.
265 265
… … …
279 279 || !!some colored text!! ||
280 280 |#
281 281
282   ===Adding links within tables===
  282 ===Links===
283 283
284 284 All the available options to create [[Docs:AddingLinks links]] can be used within table cells or headings:
285 285
… … …
293 293 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] ||
294 294 || External links: | http://www.example.com ||
295 295 || Forced external links: | [[http://www.example.com Example.com]] ||
296   || Image links: | file:/Przewalski-horses.jpg?600 ||
  296 || Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
297 297 |#
298 298 %%
299 299
… … …
306 306 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] ||
307 307 || External links: | http://www.example.com ||
308 308 || Forced external links: | [[http://www.example.com Example.com]] ||
309   || Image links: | file:/Przewalski-horses.jpg?600 ||
310   |#
311  
312   ===Adding HTML within tables===
  309 || Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
  310 |#
  311
  312 ===HTML===
313 313
314 314 You can also use [[Docs:UsingHTML embedded HTML]] in table elements:
315 315
… … …
329 329 || I love acronyms: (?WYTIWYG What You Think Is What You Get?) ||
330 330 |#
331 331
332   ===Adding a touch of style===
  332 ===Styling===
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 |(colspan=2){background-color:lightblue} 2x1 |(rowspan=2){background-color:lightyellow} 1x2 ||
  396 ||(rowspan=2){background-color:lightyellow} 1x2 |{background-color:#333;color:white} 1x1 ||
  397 ||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(colspan=2){background-color:pink} 2x1 ||
  398 |#
  399 %%
  400
  401 #|
  402 ?| Give priority |?
  403 ||(x=2 y=2){background-color:pink} 2x2 |(colspan=2){background-color:lightblue} 2x1 |(rowspan=2){background-color:lightyellow} 1x2 ||
  404 ||(rowspan=2){background-color:lightyellow} 1x2 |{background-color:#333;color:white} 1x1 ||
  405 ||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(colspan=2){background-color:pink} 2x1 ||
406 406 |#
407 407
408 408 ===Adding style through classes===
… … …
449 449
450 450 ===Referring to elements: the ##id## attribute===
451 451
452   ##id## attributes are used to refer to unique elements in a page and to provide an anchor for styling and linking. You can specify an ##id## for any table element by using the ##(i=''id'')## parameter.
  452 ##id## attributes are used to refer to unique elements in a page and to provide an anchor for styling and linking. You can specify an ##id## for any table element by using the ##(id=''id'')## parameter.
453 453
454 454 For example, the following markup creates a table with the ##id## "main_table" containing two cells with ##id##'s "cell_1" and "cell_2"
455 455
456 456 %%
457 457 #|
458   !|(i=main_table)|!
  458 !|(id=main_table)|!
459 459 ?|Using id to refer to table elements|?
460   ||(i=cell_1)This cell can be referred to by using the ##cell_1## id||
461   ||(i=cell_2)This cell can be referred to by using the ##cell_2## id||
  460 ||(id=cell_1)This cell can be referred to by using the ##cell_1## id||
  461 ||(id=cell_2)This cell can be referred to by using the ##cell_2## id||
462 462 |#
463 463 %%
464 464
465 465 #|
466 466 !|(i:main_table)|!
467 467 ?|Using id to refer to table elements|?
468   ||(i=cell_1)This cell can be referred to by using the ##cell_1## id||
469   ||(i=cell_2)This cell can be referred to by using the ##cell_2## id||
  468 ||(id=cell_1)This cell can be referred to by using the ##cell_1## id||
  469 ||(id=cell_2)This cell can be referred to by using the ##cell_2## id||
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
… … …
539 515 ====Heading scope====
540 516
541 517 To be semantically correct and accessible to users with non-visual browsers, headings should contain scope attributes describing the cell range they refer to.
542     * Column heading scopes can be specified using the ##(o=col)## parameter in the corresponding column heading;
543     * Row heading scopes can be specified using the ##(o=row)## parameter in the corresponding row heading;
  518   * Column heading scopes can be specified using the ##(scope=col)## parameter in the corresponding column heading;
  519   * Row heading scopes can be specified using the ##(scope=row)## parameter in the corresponding row heading;
544 520
545 521 The following example shows how to correctly add column and row scopes to a table to make it accessible:
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   *| |(o=col)Employees|(o=col)Founded|*
  527 *| |(scope=col)Employees|(scope=col)Founded|*
553 528 |#|
554   ^|(o=row)ACME Inc|1000|1947||
555   ^|(o=row)XYZ Corp|2000|1973||
556   |#
557   %%
558  
559   #|
560   !|(u:The number of employees and the foundation year of some imaginary companies.)|!
  529 ^|(scope=row)ACME Inc|1000|1947||
  530 ^|(scope=row)XYZ Corp|2000|1973||
  531 |#
  532 %%
  533
  534 #|
561 535 ?|Table 1: Company data|?
562 536 |[|
563   *| |(o=col)Employees|(o=col)Founded|*
  537 *| |(scope=col)Employees|(scope=col)Founded|*
564 538 |#|
565   ^|(o=row)ACME Inc|1000|1947||
566   ^|(o=row)XYZ Corp|2000|1973||
567   |#
568  
  539 ^|(scope=row)ACME Inc|1000|1947||
  540 ^|(scope=row)XYZ Corp|2000|1973||
  541 |#
  542