Difference between revisions for Playground / Table Markup Guide




← Previous edit
Revision 8 as of 02/27/2026 10:21 ▼
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 18 as of 03/01/2026 08:05 ▼
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 9 02/27/2026 15:08 WikiAdmin

(15.7 KiB) -1,478
WikiAdmin

Version1 Version2
1 As of ##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. 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 {{toc numerate=1}} 3 {{toc numerate=1}}
4   4
5 ===Table basics=== 5 ===Table basics===
6 ====Cells==== 6 ====Cells====
7 7
… … … …
136 ^| John | 400Kg | 630Kg || 136 ^| John | 400Kg | 630Kg ||
137 |# 137 |#
138 138
139 ===Spans=== 139 ===Cell Spans===
140 **Spans** are used to combine multiple cells or multiple headings vertically or horizontally and are created using the following [[TableMarkupReference attribute parameters]]: 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 141
142 ##""||""(''span options'')Element content""||""## 142 ##""||""(''span options'') Element content ""||""##
143 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: 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 145
146 %% 146 %%
147 #| 147 #|
148 ||(x=2) Cell spanning 2 columns | Cell 3 || 148 ||(colspan=2) Cell spanning 2 columns | Cell 3 ||
149 || Cell 4 | Cell 5 | Cell 6 || 149 || Cell 4 | Cell 5 | Cell 6 ||
150 || Cell 7 | Cell 8 | Cell 9 || 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 || Cell 4 | Cell 5 | Cell 6 || 156 || Cell 4 | Cell 5 | Cell 6 ||
157 || Cell 7 | Cell 8 | Cell 9 || 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: 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 161
162 %% 162 %%
163 #| 163 #|
164 ||(y=2) Cell spanning 2 rows | Cell 2 | Cell 3 || 164 ||(rowspan=2) Cell spanning 2 rows | Cell 2 | Cell 3 ||
165 || Cell 5 | Cell 6 || 165 || Cell 5 | Cell 6 ||
166 || Cell 7 | Cell 8 | Cell 9 || 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 || Cell 5 | Cell 6 || 172 || Cell 5 | Cell 6 ||
173 || Cell 7 | Cell 8 | Cell 9 || 173 || Cell 7 | Cell 8 | Cell 9 ||
174 |# 174 |#
… … … …
178 %% 178 %%
179 #| 179 #|
180 *| | Mon | Tue | Wed | Thu | Fri |* 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 || 9-10 | | | || <-- reduced by two columns 182 || 9-10 | | | || <-- reduced by two columns
183 || 10-11 | | | || 183 || 10-11 | | | ||
184 || 11-12 | | | || 184 || 11-12 | | | ||
185 || 12-13 | | | || 185 || 12-13 | | | ||
186 || 13-14 | | | || 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 || 15-16 | | || <-- reduced by one column 188 || 15-16 | | || <-- reduced by one column
189 || 16-17 | | || 189 || 16-17 | | ||
190 |# 190 |#
… … … …
192 192
193 #| 193 #|
194 *| | Mon | Tue | Wed | Thu | Fri |* 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 || 9-10 | | | || 196 || 9-10 | | | ||
197 || 10-11 | | | || 197 || 10-11 | | | ||
198 || 11-12 | | | || 198 || 11-12 | | | ||
199 || 12-13 | | | || 199 || 12-13 | | | ||
200 || 13-14 | | | || 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 || 15-16 | | || 202 || 15-16 | | ||
203 || 16-17 | | || 203 || 16-17 | | ||
204 |# 204 |#
… … … …
208 %% 208 %%
209 #| 209 #|
210 ?| Fruit production in the last two years |? 210 ?| Fruit production in the last two years |?
211 *| |(x=2) Apples |(x=2) Pears |* 211 *| |(colspan=2) Apples |(colspan=2) Pears |*
212 *| | 2025 | 2026 | 2025 | 2026 |* 212 *| | 2025 | 2026 | 2025 | 2026 |*
213 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg || 213 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg ||
214 ^| John | 400Kg | 630Kg | 210Kg | 300Kg || 214 ^| John | 400Kg | 630Kg | 210Kg | 300Kg ||
… … … …
217 217
218 #| 218 #|
219 ?| Fruit production in the last two years |? 219 ?| Fruit production in the last two years |?
220 *| |(x=2) Apples |(x=2) Pears |* 220 *| |(colspan=2) Apples |(colspan=2) Pears |*
221 *| | 2025 | 2026 | 2025 | 2026 |* 221 *| | 2025 | 2026 | 2025 | 2026 |*
222 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg || 222 ^| Mary | 300Kg | 320Kg | 400kg | 280Kg ||
223 ^| John | 400Kg | 630Kg | 210Kg | 300Kg || 223 ^| John | 400Kg | 630Kg | 210Kg | 300Kg ||
… … … …
227 227
228 %% 228 %%
229 #| 229 #|
230 ||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 || 230 ||(colspan=2 rowspan=2) 2x2 |(colspan=2) 2x1 |(rowspan=2) 1x2 ||
231 ||(y=2) 1x2 | 1x1 || 231 ||(rowspan=2) 1x2 | 1x1 ||
232 || 1x1 | 1x1 |(x=2) 2x1 || 232 || 1x1 | 1x1 |(colspan=2) 2x1 ||
233 |# 233 |#
234 %% 234 %%
235 235
236 #| 236 #|
237 ||(x=2;y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 || 237 ||(colspan=2 rowspan=2) 2x2 |(colspan=2) 2x1 |(rowspan=2) 1x2 ||
238 ||(y=2) 1x2 | 1x1 || 238 ||(rowspan=2) 1x2 | 1x1 ||
239 || 1x1 | 1x1 |(x=2) 2x1 || 239 || 1x1 | 1x1 |(colspan=2) 2x1 ||
240 |# 240 |#
241 241
242 242
… … … …
249 #| 249 #|
250 ?| Using text formatting within tables |? 250 ?| Using text formatting within tables |?
251 || ##Monospaced## | //Italics// | **Bold** | __Underlined__ || 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 ?| Using text formatting within tables |? 257 ?| Using text formatting within tables |?
258 || ##Monospaced## | //Italics// | **Bold** | __Underlined__ || 258 || ##Monospaced## | //Italics// | **Bold** | __Underlined__ ||
259 || !!Highlighted!! | --Strikethrough-- |(x=2) **//Bold italics//** || 259 || !!Highlighted!! | --Strikethrough-- |(colspan=2) **//Bold italics//** ||
260 |# 260 |#
261 261
262 ===Adding actions and images within tables=== 262 ===Actions and images within tables===
263 263
264 Simple, content-generating [[Docs:UsingActions actions]] (including [[Docs:AddingImages images]]) can be added within table cells and headings. 264 Simple, content-generating [[Docs:UsingActions actions]] (including [[Docs:AddingImages images]]) can be added within table cells and headings.
265 265
… … … …
279 || !!some colored text!! || 279 || !!some colored text!! ||
280 |# 280 |#
281 281
282 ===Adding links within tables=== 282 ===Links within tables===
283 283
284 All the available options to create [[Docs:AddingLinks links]] can be used within table cells or headings: 284 All the available options to create [[Docs:AddingLinks links]] can be used within table cells or headings:
285 285
… … … …
293 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] || 293 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] ||
294 || External links: | http://www.example.com || 294 || External links: | http://www.example.com ||
295 || Forced external links: | [[http://www.example.com Example.com]] || 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 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] || 306 || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] ||
307 || External links: | http://www.example.com || 307 || External links: | http://www.example.com ||
308 || Forced external links: | [[http://www.example.com Example.com]] || 308 || Forced external links: | [[http://www.example.com Example.com]] ||
309 || Image links: | file:/Przewalski-horses.jpg?600 || 309 || Image links: | file:/IMG_20250615_134454_135-min.jpg?600 ||
310 |# 310 |#
311 311
312 ===Adding HTML within tables=== 312 ===HTML within tables===
313 313
314 You can also use [[Docs:UsingHTML embedded HTML]] in table elements: 314 You can also use [[Docs:UsingHTML embedded HTML]] in table elements:
315 315
… … … …
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 ===Styling===
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 |(colspan=2){background-color:lightblue} 2x1 |(rowspan=2){background-color:lightyellow} 1x2 ||
396 ||(y=2){background-color:lightyellow}1x2|{background-color:#333;color:white}1x1|| 396 ||(rowspan=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 |(colspan=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 |(colspan=2){background-color:lightblue} 2x1 |(rowspan=2){background-color:lightyellow} 1x2 ||
404 ||(y=2){background-color:lightyellow}1x2|{background-color:#333;color:white}1x1|| 404 ||(rowspan=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 |(colspan=2){background-color:pink} 2x1 ||
406 |# 406 |#
407 407
408 ===Adding style through classes=== 408 ===Adding style through classes===
… … … …
449 449
450 ===Referring to elements: the ##id## attribute=== 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 For example, the following markup creates a table with the ##id## "main_table" containing two cells with ##id##'s "cell_1" and "cell_2" 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 ?|Using id to refer to table elements|? 459 ?|Using id to refer to table elements|?
460 ||(i=cell_1)This cell can be referred to by using the ##cell_1## id|| 460 ||(id=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|| 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 !|(i:main_table)|! 466 !|(i:main_table)|!
467 ?|Using id to refer to table elements|? 467 ?|Using id to refer to table elements|?
468 ||(i=cell_1)This cell can be referred to by using the ##cell_1## id|| 468 ||(id=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|| 469 ||(id=cell_2)This cell can be referred to by using the ##cell_2## id||
470 |# 470 |#
471 471
472 ===Accessibility options=== 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 ====Table head, table body and table foot==== 474 ====Table head, table body and table foot====
499 475
… … … …
539 ====Heading scope==== 515 ====Heading scope====
540 516
541 To be semantically correct and accessible to users with non-visual browsers, headings should contain scope attributes describing the cell range they refer to. 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; 518   * Column heading scopes can be specified using the ##(scope=col)## parameter in the corresponding column heading;
543   * Row heading scopes can be specified using the ##(o=row)## parameter in the corresponding row heading; 519   * Row heading scopes can be specified using the ##(scope=row)## parameter in the corresponding row heading;
544 520
545 The following example shows how to correctly add column and row scopes to a table to make it accessible: 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 ?|Table 1: Company data|| 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|| 529 ^|(scope=row)ACME Inc|1000|1947||
555 ^|(o=row)XYZ Corp|2000|1973|| 530 ^|(scope=row)XYZ Corp|2000|1973||
556 |# 531 |#
557 %% 532 %%
558 533
559 #| 534 #|
560 !|(u:The number of employees and the foundation year of some imaginary companies.)|!    
561 ?|Table 1: Company data|? 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|| 539 ^|(scope=row)ACME Inc|1000|1947||
566 ^|(o=row)XYZ Corp|2000|1973|| 540 ^|(scope=row)XYZ Corp|2000|1973||
567 |# 541 |#
568 542