Difference between revisions for Playground / Table Markup Guide
| Merge of Version1 & Version2 | |
|---|---|
| 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 | |
| 3 | {{toc numerate=1}} |
| 4 | |
| 5 | ===Table basics=== |
| 6 | ====Cells==== |
| 7 | |
| … | … |
| 136 | ^| John | 400Kg | 630Kg || |
| 137 | |# |
| 138 | |
| 139 | === |
| 140 | ** |
| 141 | |
| 142 | ##""||""(''span options'') |
| 143 | |
| 144 | A **cell spanning multiple columns** is generated by prefixing the cell content with a ##( |
| 145 | |
| 146 | %% |
| 147 | #| |
| 148 | ||( |
| 149 | || Cell 4 | Cell 5 | Cell 6 || |
| 150 | || Cell 7 | Cell 8 | Cell 9 || |
| 151 | |# |
| 152 | %% |
| 153 | |
| 154 | #| |
| 155 | ||( |
| 156 | || Cell 4 | Cell 5 | Cell 6 || |
| 157 | || Cell 7 | Cell 8 | Cell 9 || |
| 158 | |# |
| 159 | |
| 160 | Spans can also be applied to rows. A **cell spanning multiple rows** is generated by prefixing the cell content with a ##( |
| 161 | |
| 162 | %% |
| 163 | #| |
| 164 | ||( |
| 165 | || Cell 5 | Cell 6 || |
| 166 | || Cell 7 | Cell 8 | Cell 9 || |
| 167 | |# |
| 168 | %% |
| 169 | |
| 170 | #| |
| 171 | ||( |
| 172 | || Cell 5 | Cell 6 || |
| 173 | || Cell 7 | Cell 8 | Cell 9 || |
| 174 | |# |
| … | … |
| 178 | %% |
| 179 | #| |
| 180 | *| | Mon | Tue | Wed | Thu | Fri |* |
| 181 | || 8-9 | |( |
| 182 | || 9-10 | | | || <-- reduced by two columns |
| 183 | || 10-11 | | | || |
| 184 | || 11-12 | | | || |
| 185 | || 12-13 | | | || |
| 186 | || 13-14 | | | || |
| 187 | || 14-15 |( |
| 188 | || 15-16 | | || <-- reduced by one column |
| 189 | || 16-17 | | || |
| 190 | |# |
| … | … |
| 192 | |
| 193 | #| |
| 194 | *| | Mon | Tue | Wed | Thu | Fri |* |
| 195 | || 8-9 | |( |
| 196 | || 9-10 | | | || |
| 197 | || 10-11 | | | || |
| 198 | || 11-12 | | | || |
| 199 | || 12-13 | | | || |
| 200 | || 13-14 | | | || |
| 201 | || 14-15 |( |
| 202 | || 15-16 | | || |
| 203 | || 16-17 | | || |
| 204 | |# |
| … | … |
| 208 | %% |
| 209 | #| |
| 210 | ?| Fruit production in the last two years |? |
| 211 | *| |( |
| 212 | *| | 2025 | 2026 | 2025 | 2026 |* |
| 213 | ^| Mary | 300Kg | 320Kg | 400kg | 280Kg || |
| 214 | ^| John | 400Kg | 630Kg | 210Kg | 300Kg || |
| … | … |
| 217 | |
| 218 | #| |
| 219 | ?| Fruit production in the last two years |? |
| 220 | *| |( |
| 221 | *| | 2025 | 2026 | 2025 | 2026 |* |
| 222 | ^| Mary | 300Kg | 320Kg | 400kg | 280Kg || |
| 223 | ^| John | 400Kg | 630Kg | 210Kg | 300Kg || |
| … | … |
| 227 | |
| 228 | %% |
| 229 | #| |
| 230 | ||( |
| 231 | ||( |
| 232 | || 1x1 | 1x1 |( |
| 233 | |# |
| 234 | %% |
| 235 | |
| 236 | #| |
| 237 | ||( |
| 238 | ||( |
| 239 | || 1x1 | 1x1 |( |
| 240 | |# |
| 241 | |
| 242 | |
| 243 | ===Formatting text |
| 244 | |
| 245 | You can use any kind of basic [[wackowiki:Doc/English/Formatting Wacko markup]] to render text within tables. |
| 246 | The following example adds basic formatting to cell content: |
| … | … |
| 249 | #| |
| 250 | ?| Using text formatting within tables |? |
| 251 | || ##Monospaced## | //Italics// | **Bold** | __Underlined__ || |
| 252 | || !!Highlighted!! | --Strikethrough-- |( |
| 253 | |# |
| 254 | %% |
| 255 | |
| 256 | #| |
| 257 | ?| Using text formatting within tables |? |
| 258 | || ##Monospaced## | //Italics// | **Bold** | __Underlined__ || |
| 259 | || !!Highlighted!! | --Strikethrough-- |( |
| 260 | |# |
| 261 | |
| 262 | ===A |
| 263 | |
| 264 | Simple, content-generating [[Docs:UsingActions actions]] (including [[Docs:AddingImages images]]) can be added within table cells and headings. |
| 265 | |
| … | … |
| 279 | || !!some colored text!! || |
| 280 | |# |
| 281 | |
| 282 | === |
| 283 | |
| 284 | All the available options to create [[Docs:AddingLinks links]] can be used within table cells or headings: |
| 285 | |
| … | … |
| 293 | || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] || |
| 294 | || External links: | http://www.example.com || |
| 295 | || Forced external links: | [[http://www.example.com Example.com]] || |
| 296 | || Image links: | file:/ |
| 297 | |# |
| 298 | %% |
| 299 | |
| … | … |
| 306 | || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] || |
| 307 | || External links: | http://www.example.com || |
| 308 | || Forced external links: | [[http://www.example.com Example.com]] || |
| 309 | || Image links: | file:/ |
| 310 | |# |
| 311 | |
| 312 | === |
| 313 | |
| 314 | You can also use [[Docs:UsingHTML embedded HTML]] in table elements: |
| 315 | |
| … | … |
| 329 | || I love acronyms: (?WYTIWYG What You Think Is What You Get?) || |
| 330 | |# |
| 331 | |
| 332 | === |
| 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''} |
| 335 | |
| 336 | For example, to render a cell with **red background** and **white text color**, you can do the following: |
| 337 | |
| … | … |
| 392 | %% |
| 393 | #| |
| 394 | ?| Give priority |? |
| 395 | ||(x=2 y=2){background-color:pink} 2x2 |( |
| 396 | ||( |
| 397 | ||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |( |
| 398 | |# |
| 399 | %% |
| 400 | |
| 401 | #| |
| 402 | ?| Give priority |? |
| 403 | ||(x=2 y=2){background-color:pink} 2x2 |( |
| 404 | ||( |
| 405 | ||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |( |
| 406 | |# |
| 407 | |
| 408 | ===Adding style through classes=== |
| … | … |
| 449 | |
| 450 | ===Referring to elements: the ##id## attribute=== |
| 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 |
| 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" |
| 455 | |
| 456 | %% |
| 457 | #| |
| 458 | !|(i |
| 459 | ?|Using id to refer to table elements|? |
| 460 | ||(i |
| 461 | ||(i |
| 462 | |# |
| 463 | %% |
| 464 | |
| 465 | #| |
| 466 | !|(i:main_table)|! |
| 467 | ?|Using id to refer to table elements|? |
| 468 | ||(i |
| 469 | ||(i |
| 470 | |# |
| 471 | |
| 472 | ===Accessibility options=== |
| … | … |
| 515 | ====Heading scope==== |
| 516 | |
| 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. |
| 518 | * Column heading scopes can be specified using the ##( |
| 519 | * Row heading scopes can be specified using the ##( |
| 520 | |
| 521 | The following example shows how to correctly add column and row scopes to a table to make it accessible: |
| 522 | |
| … | … |
| 524 | #| |
| 525 | ?|Table 1: Company data|| |
| 526 | |[| |
| 527 | *| |( |
| 528 | |#| |
| 529 | ^|( |
| 530 | ^|( |
| 531 | |# |
| 532 | %% |
| 533 | |
| 534 | #| |
| 535 | ?|Table 1: Company data|? |
| 536 | |[| |
| 537 | *| |( |
| 538 | |#| |
| 539 | ^|( |
| 540 | ^|( |
| 541 | |# |
| 542 | |