Difference between revisions for Playground / Table Markup Guide
| Merge of Version1 & Version2 | |
|---|---|
| 1 | As of |
| 2 | |
| 3 | {{toc numerate=1}} |
| 4 | |
| 5 | ===Table basics=== |
| 6 | ====Cells==== |
| 7 | |
| 8 | The most basic element of a table is a **cell**. Single cells can be created using the standard delimiter ##""||""##, e.g.: |
| 9 | |
| … | … |
| 19 | |
| 20 | Note that a cell must always be open and closed by delimiters. |
| 21 | |
| 22 | ====Rows==== |
| 23 | |
| 24 | **Rows** can be created by adding on the same line multiple cells: |
| 25 | |
| 26 | %% |
| … | … |
| 32 | #| |
| 33 | || Cell 1 | Cell 2 | Cell 3 || |
| 34 | |# |
| 35 | |
| 36 | ====Columns==== |
| 37 | |
| 38 | **Columns** can be created by adding rows on separate lines: |
| 39 | |
| … | … |
| 68 | |# |
| 69 | |
| 70 | ===Headings=== |
| 71 | As soon as you create slightly more complex data tables, you will need to specify column and row **headings**. Headings are special cells that specify what kind of data rows and columns contain. The most basic way of creating a heading is by using ## |
| 72 | |
| 73 | The following is an example of a simple table with **column headings** |
| 74 | |
| 75 | %% |
| 76 | #| |
| … | … |
| 84 | || 300Kg | 480Kg || |
| 85 | |# |
| 86 | |
| 87 | **Row headings** are created in the same way. Since they are usually followed by normal cells, they must be terminated with the ##""| |
| 88 | |
| 89 | %% |
| 90 | #| |
| … | … |
| 122 | |
| 123 | %% |
| 124 | #| |
| 125 | ?| Fruit production in 20 |
| 126 | *| | Apples | Pears |* |
| 127 | ^| Mary | 300Kg | 320Kg || |
| 128 | ^| John | 400Kg | 630Kg || |
| … | … |
| 130 | %% |
| 131 | |
| 132 | #| |
| 133 | ?| Fruit production in 20 |
| 134 | *| | Apples | Pears |* |
| 135 | ^| Mary | 300Kg | 320Kg || |
| 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-1 |
| 186 | || 1 |
| 187 | || |
| 188 | || |
| 189 | || |
| 190 | |# |
| 191 | %% |
| 192 | |
| 193 | #| |
| 194 | *| | Mon | Tue | Wed | Thu | Fri |* |
| 195 | || 8-9 | |( |
| 196 | || 9-10 | | | || |
| 197 | || 10-11 | | | || |
| 198 | || 11-12 | | | || |
| 199 | || 12-1 |
| 200 | || 1 |
| 201 | || |
| 202 | || |
| 203 | || |
| 204 | |# |
| 205 | |
| 206 | Spans are particularly useful to create **subheadings**: |
| … | … |
| 208 | %% |
| 209 | #| |
| 210 | ?| Fruit production in the last two years |? |
| 211 | *| |( |
| 212 | *| | 20 |
| 213 | ^| Mary | 300Kg | 320Kg | 400kg | 280Kg || |
| 214 | ^| John | 400Kg | 630Kg | 210Kg | 300Kg || |
| 215 | |# |
| … | … |
| 217 | |
| 218 | #| |
| 219 | ?| Fruit production in the last two years |? |
| 220 | *| |( |
| 221 | *| | 20 |
| 222 | ^| Mary | 300Kg | 320Kg | 400kg | 280Kg || |
| 223 | ^| John | 400Kg | 630Kg | 210Kg | 300Kg || |
| 224 | |# |
| … | … |
| 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 | |
| … | … |
| 288 | ?| Adding links within tables |? |
| 289 | || Camelcase links: | SandBox || |
| 290 | || Escaped camelcase links: | ~SandBox escaped || |
| 291 | || Forced links: | [[ |
| 292 | || Interwiki links: | Wikipedia:Unicode || |
| 293 | || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] || |
| 294 | || External links: | http://www.example.com || |
| … | … |
| 301 | ?| Adding links within tables |? |
| 302 | || Camelcase links: | SandBox || |
| 303 | || Escaped camelcase links: | ~SandBox escaped || |
| 304 | || Forced links: | [[ |
| 305 | || Interwiki links: | Wikipedia:Unicode || |
| 306 | || Forced interwiki links: | [[Wikipedia:Unicode Unicode article on Wikipedia]] || |
| 307 | || External links: | http://www.example.com || |
| … | … |
| 309 | || Image links: | file:/IMG_20250615_134454_135-min.jpg?600 || |
| 310 | |# |
| 311 | |
| 312 | === |
| 313 | |
| 314 | You can also use [[Docs:UsingHTML embedded HTML]] in table elements: |
| 315 | |
| 316 | %% |
| 317 | #| |
| … | … |
| 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 | |
| … | … |
| 391 | |
| 392 | %% |
| 393 | #| |
| 394 | ?| |
| 395 | ||( |
| 396 | ||( |
| 397 | || |
| 398 | |# |
| 399 | %% |
| 400 | |
| 401 | #| |
| 402 | ?| |
| 403 | ||( |
| 404 | ||( |
| 405 | || |
| 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 | !|(id=main_table)|! |
| 459 | ?|Using id to refer to table elements|? |
| 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 | |# |
| 463 | %% |
| 464 | |
| 465 | #| |
| 466 | !|(i:main_table)|! |
| 467 | ?|Using id to refer to table elements|? |
| 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 | |# |
| 471 | |
| 472 | ===Accessibility options=== |
| 473 | |
| 474 | ====Table head, table body and table foot==== |
| 475 | |
| … | … |
| 484 | |
| 485 | %% |
| 486 | #| |
| 487 | !| |
| 488 | ?|Here's how you can group rows|? |
| 489 | |[| |
| 490 | *|Name|Place|Telephone|* |
| … | … |
| 499 | %% |
| 500 | |
| 501 | #| |
| 502 | !| |
| 503 | ?|Here's how you can group rows|? |
| 504 | |[| |
| 505 | *|Name|Place|Telephone|* |
| … | … |
| 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 | |
| 523 | %% |
| 524 | #| |
| 525 | ?|Table 1: Company data|| |
| 526 | |[| |
| 527 | *| |( |
| 528 | |#| |
| 529 | ^|(scope=row)ACME Inc|1000|1947|| |
| 530 | ^|(scope=row)XYZ Corp|2000|1973|| |
| 531 | |# |
| 532 | %% |
| 533 | |
| 534 | #| |
| 535 | ?|Table 1: Company data|? |
| 536 | |[| |
| 537 | *| |( |
| 538 | |#| |
| 539 | ^|( |
| 540 | ^|( |
| 541 | |# |
| 542 | |