Difference between revisions for Playground / Table Markup Guide
| Version1 | Version2 | ||
|---|---|---|---|
| 227 | 227 | ||
| 228 | %% | 228 | %% |
| 229 | #| | 229 | #| |
| 230 |
||(x=2 |
230 | ||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 || |
| 231 | ||(y=2) 1x2 | 1x1 || | 231 | ||(y=2) 1x2 | 1x1 || |
| 232 | || 1x1 | 1x1 |(x=2) 2x1 || | 232 | || 1x1 | 1x1 |(x=2) 2x1 || |
| 233 | |# | 233 | |# |
| 234 | %% | 234 | %% |
| 235 | 235 | ||
| 236 | #| | 236 | #| |
| 237 |
||(x=2 |
237 | ||(x=2 y=2) 2x2 |(x=2) 2x1 |(y=2) 1x2 || |
| 238 | ||(y=2) 1x2 | 1x1 || | 238 | ||(y=2) 1x2 | 1x1 || |
| 239 | || 1x1 | 1x1 |(x=2) 2x1 || | 239 | || 1x1 | 1x1 |(x=2) 2x1 || |
| 240 | |# | 240 | |# |
| … | … | … | … |
| 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:/ |
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:/ |
309 | || Image links: | file:/IMG_20250615_134454_135-min.jpg?600 || |
| 310 | |# | 310 | |# |
| 311 | 311 | ||
| 312 | ===Adding HTML within tables=== | 312 | ===Adding HTML within tables=== |
| … | … | … | … |
| 317 | #| | 317 | #| |
| 318 | ?| Embedding HTML within tables |? | 318 | ?| Embedding HTML within tables |? |
| 319 | || Here's some superscript: a^^2+1^^ || | 319 | || Here's some superscript: a^^2+1^^ || |
| 320 |
|| And here's some subscript too: a |
320 | || And here's some subscript too: a,,2k,, || |
| 321 | || I love acronyms: (?WYTIWYG What You Think Is What You Get?) || | 321 | || I love acronyms: (?WYTIWYG What You Think Is What You Get?) || |
| 322 | |# | 322 | |# |
| 323 | %% | 323 | %% |
| … | … | … | … |
| 325 | #| | 325 | #| |
| 326 | ?| Embedding HTML within tables |? | 326 | ?| Embedding HTML within tables |? |
| 327 | || Here's some superscript: a^^2+1^^ || | 327 | || Here's some superscript: a^^2+1^^ || |
| 328 |
|| And here's some subscript too: a |
328 | || And here's some subscript too: a,,2k,, || |
| 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 | ===Adding a touch of style=== |
| 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''} |
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 |
?| |
394 | ?| Give priority |? |
| 395 |
||(x=2 |
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} |
396 | ||(y=2){background-color:lightyellow} 1x2 |{background-color:#333;color:white} 1x1 || |
| 397 |
||{background-color:lightblue} |
397 | ||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(x=2){background-color:pink} 2x1 || |
| 398 |
|# |
398 | |# |
| 399 |
%% |
399 | %% |
| 400 |
|
400 | |
| 401 |
#| |
401 | #| |
| 402 |
?| |
402 | ?| Give priority |? |
| 403 |
||(x=2 |
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} |
404 | ||(y=2){background-color:lightyellow} 1x2 |{background-color:#333;color:white} 1x1 || |
| 405 |
||{background-color:lightblue} |
405 | ||{background-color:lightblue} 1x1 |{background-color:#333;color:white} 1x1 |(x=2){background-color:pink} 2x1 || |
| 406 | |# | 406 | |# |
| 407 | 407 | ||
| 408 | ===Adding style through classes=== | 408 | ===Adding style through classes=== |
| … | … | … | … |
| 532 | %% | 532 | %% |
| 533 | 533 | ||
| 534 | #| | 534 | #| |
| 535 |
|
||
| 536 | ?|Table 1: Company data|? | 535 | ?|Table 1: Company data|? |
| 537 | |[| | 536 | |[| |
| 538 | *| |(o=col)Employees|(o=col)Founded|* | 537 | *| |(o=col)Employees|(o=col)Founded|* |