Help:Table: Difference between revisions
extracted from basic examples on Help:Editing # Tables |
expanded, still something to do |
||
| Line 1: | Line 1: | ||
Tables can be used to layout contents horizontally and vertically. Tables can be made sortable, columns may be aligned, cells may be combined. See the following examples. | |||
:''For basic usage see [[Help:Editing #Tables]]'' | :''For basic usage see [[Help:Editing #Tables]]'' | ||
| Line 5: | Line 5: | ||
== Some Examples == | == Some Examples == | ||
=== Table layout without border lines === | |||
Layout contents vertically and horizontally (without making obvious that you use tables for this). Using the exclamation mark (<code>!</code>) instead of the pipe symbol (<code>|</code>) center-aligns the cell text and sets it to '''bold''' face. | |||
<nowiki>{| | <nowiki>{| | ||
! A | ! A | ||
! B | ! B | ||
| Line 20: | Line 21: | ||
{| | {| | ||
! A | ! A | ||
! B | ! B | ||
| Line 31: | Line 31: | ||
|} | |} | ||
=== Standard wiki table layout === | |||
A table with obvious heading style and decent lines to optically separate cells. You get this by adding <code>class="wikitable"</code> to the first line of the table. | |||
<nowiki>{| class="wikitable" | <nowiki>{| class="wikitable" | ||
! A | ! A | ||
! B | ! B | ||
| Line 46: | Line 47: | ||
{| class="wikitable" | {| class="wikitable" | ||
! A | ! A | ||
! B | ! B | ||
| Line 57: | Line 57: | ||
|} | |} | ||
=== Heading style for left and top cells === | |||
Sometimes it's helpful to place the legend on the left side. | |||
<nowiki>{| class="wikitable" | <nowiki>{| class="wikitable" | ||
! ?? | ! ?? | ||
! 1 | ! 1 | ||
| Line 75: | Line 76: | ||
{| class="wikitable" | {| class="wikitable" | ||
! ?? | ! ?? | ||
! 1 | ! 1 | ||
| Line 89: | Line 89: | ||
|} | |} | ||
sortable | === Sortable tables === | ||
Tables can be sorted automatically by adding the <code>sortable</code> class. If you wish to disable sorting for a column (typically description or comments) add <code>class="unsortable"</code> to the column heading. | |||
<nowiki>{| class="wikitable sortable" | <nowiki>{| class="wikitable sortable" | ||
! Steps per Octave !! Step Size | ! Steps per Octave !! Step Size | ||
! class="unsortable" | comments | ! class="unsortable" | comments | ||
| Line 106: | Line 107: | ||
{| class="wikitable sortable" | {| class="wikitable sortable" | ||
! Steps per Octave !! Step Size | ! Steps per Octave !! Step Size | ||
! class="unsortable" | comments | ! class="unsortable" | comments | ||
| Line 121: | Line 121: | ||
== Special needs == | == Special needs == | ||
=== Adjusting | === Table title or description === | ||
As to add a description or title to your table, use the pipe-plus combination <code>|+</code> at the beginning of the line. For better readability you may add an optional row separator (<code>|-</code>) in the following line. | |||
<nowiki>{| class="wikitable" | |||
|+ title or description | |||
|- | |||
! A | |||
! B | |||
|- | |||
| 1 | |||
| 2 | |||
|- | |||
| x | |||
| xx | |||
|}</nowiki> | |||
{| class="wikitable" | |||
|+ title or description | |||
|- | |||
! A | |||
! B | |||
|- | |||
| 1 | |||
| 2 | |||
|- | |||
| x | |||
| xx | |||
|} | |||
=== Adjusting text alignment === | |||
If you want to override the default text alignment for all cells, add the class <code>"center-all"</code> to the <code>class="wikitable"</code> statement at beginning of the table. | |||
==== for whole columns ==== | |||
Add a the appropriate class(es) to the <code>class="wikitable"</code> statement at beginning of the table. Their name starts with the alignment specification (<code>left</code>, <code>center</code>, or <code>right</code>) and a number (1 to 9) after a minus sign (<code>-</code>). | |||
If you want to override the default text (left) alignment to make the first column right-aligned and second column center-aligned, add the class <code>"right-1"</code> and <code>"center-2"</code> to the <code>class="wikitable"</code> statement at beginning of the table. | |||
'''todo: example''' | |||
==== for single cells ==== | |||
The table cells are left aligned by default, the heading cells are center aligned. You may change this via inline CSS style definitions: | The table cells are left aligned by default, the heading cells are center aligned. You may change this via inline CSS style definitions: | ||
| Line 141: | Line 184: | ||
|} | |} | ||
== Combining table cells == | |||
todo: internal description of colspans and rowspans | |||
=== External helper tools === | === External helper tools === | ||
| Line 187: | Line 232: | ||
== See also == | == See also == | ||
* [[Help:Help]] | * [[Help:Help]] | ||
* [[Help:Editing]] | * [[Help:Editing]] | ||
[[Category:Help]] | [[Category:Help]] | ||
[[Category: | [[Category:Todo:add example|?]] | ||
Revision as of 07:53, 8 June 2020
Tables can be used to layout contents horizontally and vertically. Tables can be made sortable, columns may be aligned, cells may be combined. See the following examples.
- For basic usage see Help:Editing #Tables
Some Examples
Table layout without border lines
Layout contents vertically and horizontally (without making obvious that you use tables for this). Using the exclamation mark (!) instead of the pipe symbol (|) center-aligns the cell text and sets it to bold face.
{|
! A
! B
|-
| 1
| 2
|-
| x
| xx
|}
| A | B |
|---|---|
| 1 | 2 |
| x | xx |
Standard wiki table layout
A table with obvious heading style and decent lines to optically separate cells. You get this by adding class="wikitable" to the first line of the table.
{| class="wikitable"
! A
! B
|-
| 1
| 2
|-
| x
| xx
|}
| A | B |
|---|---|
| 1 | 2 |
| x | xx |
Heading style for left and top cells
Sometimes it's helpful to place the legend on the left side.
{| class="wikitable"
! ??
! 1
! 2
|-
! A
| a1
| a2
|-
! B
| b1
| b2
|}
| ?? | 1 | 2 |
|---|---|---|
| A | a1 | a2 |
| B | b1 | b2 |
Sortable tables
Tables can be sorted automatically by adding the sortable class. If you wish to disable sorting for a column (typically description or comments) add class="unsortable" to the column heading.
{| class="wikitable sortable"
! Steps per Octave !! Step Size
! class="unsortable" | comments
|-
| 15 || 80 || This is nice
|-
| 24 || 50 || Peppermint
|-
| 12 || 100 || Try this for free
|-
| 6 || 200 ||Debussy loves it.
|}
| Steps per Octave | Step Size | comments |
|---|---|---|
| 15 | 80 | This is nice |
| 24 | 50 | Peppermint |
| 12 | 100 | Try this for free |
| 6 | 200 | Debussy loves it. |
Special needs
Table title or description
As to add a description or title to your table, use the pipe-plus combination |+ at the beginning of the line. For better readability you may add an optional row separator (|-) in the following line.
{| class="wikitable"
|+ title or description
|-
! A
! B
|-
| 1
| 2
|-
| x
| xx
|}
| A | B |
|---|---|
| 1 | 2 |
| x | xx |
Adjusting text alignment
If you want to override the default text alignment for all cells, add the class "center-all" to the class="wikitable" statement at beginning of the table.
for whole columns
Add a the appropriate class(es) to the class="wikitable" statement at beginning of the table. Their name starts with the alignment specification (left, center, or right) and a number (1 to 9) after a minus sign (-).
If you want to override the default text (left) alignment to make the first column right-aligned and second column center-aligned, add the class "right-1" and "center-2" to the class="wikitable" statement at beginning of the table.
todo: example
for single cells
The table cells are left aligned by default, the heading cells are center aligned. You may change this via inline CSS style definitions:
| what you want for the cell | what you do to get it |
|---|---|
| left aligned text | nothing to do |
| centered text | place style="text-align:center;" | after the opening pipe
|
| right aligned | place style="text-align:center;" | after the opening pipe
|
| headline style | exclamation mark instead of the pipe symbol starts the cell |
Combining table cells
todo: internal description of colspans and rowspans
External helper tools
If you have to construct really complex tables with colspans and rowspans, you may use this online table generator:
Generate tables in MediaWiki format - TablesGenerator.com
For example, this wiki markup
{| class="wikitable"
! colspan="3" | 1
! 2
! 3
|-
| rowspan="2" | A
| colspan="3" | B
| C
|-
| rowspan="2" colspan="2" | D
| colspan="2" | E
|-
| F
| G
| H
|}
will be rendered into this table:
| 1 | 2 | 3 | ||
|---|---|---|---|---|
| A | B | C | ||
| D | E | |||
| F | G | H | ||