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 || |
| … | … |
| 178 | %% |
| 179 | #| |
| 180 | *| | Mon | Tue | Wed | Thu | Fri |* |
| 181 | || 8-9 | |(y=9) Outreach |
| 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 | |(y=9) Outreach |
| 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**: |
| … | … |
| 209 | #| |
| 210 | ?| Fruit production in the last two years |? |
| 211 | *| |(x=2) Apples |(x=2) Pears |* |
| 212 | *| | 20 |
| 213 | ^| Mary | 300Kg | 320Kg | 400kg | 280Kg || |
| 214 | ^| John | 400Kg | 630Kg | 210Kg | 300Kg || |
| 215 | |# |
| … | … |
| 218 | #| |
| 219 | ?| Fruit production in the last two years |? |
| 220 | *| |(x=2) Apples |(x=2) Pears |* |
| 221 | *| | 20 |
| 222 | ^| Mary | 300Kg | 320Kg | 400kg | 280Kg || |
| 223 | ^| John | 400Kg | 630Kg | 210Kg | 300Kg || |
| 224 | |# |
| … | … |
| 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 || |
| 295 | || Forced external links: | [[http://www.example.com Example.com]] || |
| 296 | || Image links: | file:/ |
| 297 | |# |
| 298 | %% |
| 299 | |
| … | … |
| 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 || |
| 308 | || Forced external links: | [[http://www.example.com Example.com]] || |
| 309 | || Image links: | file:/ |
| 310 | |# |
| 311 | |
| 312 | ===Adding HTML within tables=== |
| 313 | |
| 314 | You can also use [[Docs:UsingHTML embedded HTML]] in table elements: |
| 315 | |
| 316 | %% |
| 317 | #| |
| … | … |
| 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=main_table)|! |
| 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|| |
| 462 | |# |
| 463 | %% |
| 464 | |
| 465 | #| |
| 466 | !|(i:main_table)|! |
| 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|| |
| 470 | |# |
| 471 | |
| 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 |
| 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 | |
| 498 | ====Table head, table body and table foot==== |
| 499 | |
| … | … |
| 508 | |
| 509 | %% |
| 510 | #| |
| 511 | !| |
| 512 | ?|Here's how you can group rows|? |
| 513 | |[| |
| 514 | *|Name|Place|Telephone|* |
| … | … |
| 523 | %% |
| 524 | |
| 525 | #| |
| 526 | !| |
| 527 | ?|Here's how you can group rows|? |
| 528 | |[| |
| 529 | *|Name|Place|Telephone|* |
| … | … |
| 539 | ====Heading scope==== |
| 540 | |
| 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. |
| 542 | * Column heading scopes can be specified using the ##(o |
| 543 | * Row heading scopes can be specified using the ##(o |
| 544 | |
| 545 | The following example shows how to correctly add column and row scopes to a table to make it accessible: |
| 546 | |
| … | … |
| 549 | !|(u:The number of employees and the foundation year of some imaginary companies.)|! |
| 550 | ?|Table 1: Company data|| |
| 551 | |[| |
| 552 | *| |(o |
| 553 | |#| |
| 554 | ^|(o |
| 555 | ^|(o |
| 556 | |# |
| 557 | %% |
| 558 | |
| … | … |
| 560 | !|(u:The number of employees and the foundation year of some imaginary companies.)|! |
| 561 | ?|Table 1: Company data|? |
| 562 | |[| |
| 563 | *| |(o |
| 564 | |#| |
| 565 | ^|(o |
| 566 | ^|(o |
| 567 | |# |
| 568 | |