Help:Table: Difference between revisions
ArrowHead294 (talk | contribs) |
m →For single cells: fix |
||
| (4 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{Wikipedia}} | |||
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. | 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. | ||
| Line 115: | Line 116: | ||
|- | |- | ||
| 6 || 200 || Debussy loves it. | | 6 || 200 || Debussy loves it. | ||
|}</ | |}</pre> | ||
{| class="wikitable sortable" | {| class="wikitable sortable" | ||
| Line 214: | Line 215: | ||
|- | |- | ||
| Left aligned text | | Left aligned text | ||
| Nothing to do (if the default is "left-align", this is mostly the case)<ref>If a column has other then left-aligned text, for example by <code>class="... right-all"</code> (see above section(s)), cell-specific inline [[CSS]] will prioritized highest</ref> | | Nothing to do (if the default is "left-align", this is mostly the case)<ref>If a column has other then left-aligned text, for example by <code>class="... right-all"</code> (see above section(s)), cell-specific inline [[CSS]] will prioritized highest, and use <code>style{{=}}"text-align: left;" {{pipe}}</code></ref> | ||
|- | |- | ||
| style="text-align:center;" | Centered text | | style="text-align:center;" | Centered text | ||
| Line 220: | Line 221: | ||
|- | |- | ||
| style="text-align:right;" | Right aligned | | style="text-align:right;" | Right aligned | ||
| Place <code>style{{=}}"text-align: | | Place <code>style{{=}}"text-align: right;" {{pipe}}</code> after the opening pipe | ||
|- | |- | ||
! Headline style | ! Headline style | ||
| Line 235: | Line 236: | ||
{| class="wikitable" | {| class="wikitable" | ||
|+ Compact syntax: one line per row | |+ style="font-size: 105%;" | Compact syntax: one line per row | ||
|- | |- | ||
! Wikitext | ! Wikitext | ||
| Line 257: | Line 258: | ||
{| class="wikitable" | {| class="wikitable" | ||
|+ "Airy" syntax: one line per cell | |+ style="font-size: 105%;" | "Airy" syntax: one line per cell | ||
|- | |- | ||
! Wikitext | ! Wikitext | ||
| Line 264: | Line 265: | ||
| <pre> | | <pre> | ||
{| class="wikitable" | {| class="wikitable" | ||
|- | |||
!| A|X | !| A|X | ||
!| B|Y | !| B|Y | ||
| Line 271: | Line 273: | ||
|} | |} | ||
</pre> | </pre> | ||
| {{(!}} class{{=}}"wikitable" | | {{(!}} class{{=}}"wikitable" style{{=}}"margin: auto auto auto auto;" | ||
{{!-}} | |||
!{{!}} A{{!}}X | !{{!}} A{{!}}X | ||
!{{!}} B{{!}}Y | !{{!}} B{{!}}Y | ||
| Line 280: | Line 283: | ||
|} | |} | ||
Alternatively, pipe characters can be escaped using {{tlx|!}} or {{tlx|pipe}} | Alternatively, pipe characters can be escaped using {{tlx|!}} or {{tlx|pipe}}: | ||
{| class="wikitable" | |||
|+ style="font-size: 105%;" | Using escapes | |||
|- | |||
! Wikitext | |||
! Rendered output | |||
|- | |||
| <pre> | |||
{| class="wikitable" | |||
|- | |||
! A{{pipe}}X | |||
! B{{pipe}}Y | |||
|- | |||
| 1{{pipe}}2 | |||
| 3{{pipe}}4 | |||
|} | |||
</pre> | |||
| {{(!}} class{{=}}"wikitable" style{{=}}"margin: auto auto auto auto;" | |||
{{!-}} | |||
! A{{pipe}}X | |||
! B{{pipe}}Y | |||
{{!-}} | |||
{{!}} 1{{pipe}}2 | |||
{{!}} 3{{pipe}}4 | |||
{{!)}} | |||
|} | |||
== Combining table cells == | == Combining table cells == | ||
Latest revision as of 10:22, 28 December 2025
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 optional row separators (|-) around this line.
{| class="wikitable"
|+ Title or description
|-
! Heading A
! Heading B
|-
| Cell 1
| Cell 2
|-
| Cell 3
| Cell 4
|}
| Heading A | Heading B |
|---|---|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
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 12) after a minus sign (-).
To make the first column left-aligned, the second center-aligned, and the third right-aligned, add the classes "left-1", "center-2", and "right-3" to the "wikitable" class, separated by spaces:
{| class="wikitable left-1 center-2 right-3"
|-
! Left-aligned
! Center-aligned
! Right-aligned
|-
| Word
| 3/2
| 0.234
|-
| More words
| 129/128
| 123.456
|}
| Left-aligned | Center-aligned | Right-aligned |
|---|---|---|
| Word | 3/2 | 0.234 |
| More words | 129/128 | 123.456 |
If you want to override the default text alignment (which is left) for the whole table, use "center-all" or "right-all".
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 (if the default is "left-align", this is mostly the case)[1] |
| Centered text | Place style="text-align: center;" | after the opening pipe
|
| Right aligned | Place style="text-align: right;" | after the opening pipe
|
| Headline style | Exclamation mark instead of the pipe symbol starts the cell |
Pipe symbols in cells
The pipe character is an important meta char to MediaWiki. Especially in tables, where each cell can be decorated with its own class and style specification, it is hard to get the pipe character displayed for what it is. Wikipedia's help page has some suggestions for coping with this issue. However, adding another pipe right after the initial pipe(s) also works:
| Wikitext | Rendered output | ||||
|---|---|---|---|---|---|
{| class="wikitable"
|-
!| A|X !!| B|Y
|-
|| 1|2 ||| 3|4
|}
|
|
| Wikitext | Rendered output | ||||
|---|---|---|---|---|---|
{| class="wikitable"
|-
!| A|X
!| B|Y
|-
|| 1|2
|| 3|4
|}
|
|
Alternatively, pipe characters can be escaped using {{!}} or {{pipe}}:
| Wikitext | Rendered output | ||||
|---|---|---|---|---|---|
{| class="wikitable"
|-
! A{{pipe}}X
! B{{pipe}}Y
|-
| 1{{pipe}}2
| 3{{pipe}}4
|}
|
|
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 | ||
