Help:Table: Difference between revisions

From Xenharmonic Wiki
Jump to navigation Jump to search
Fredg999 category edits (talk | contribs)
m Todo categories
Overthink (talk | contribs)
 
(7 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.


:''For basic usage see [[Help:Editing #Tables]]''
For basic usage see [[Help:Editing#Tables]].


== Some Examples ==
== Some Examples ==
Line 9: Line 10:
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.
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>{|  
<pre>
{|  
|-
! A
! A
! B
! B
Line 18: Line 21:
| x
| x
| xx
| xx
|}</nowiki>
|}
</pre>


{|  
{|  
|-
! A
! A
! B
! B
Line 32: Line 37:


=== Standard wiki table layout ===
=== 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.
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"
<pre>
{| class="wikitable"
|-
! A
! A
! B
! B
Line 44: Line 50:
| x
| x
| xx
| xx
|}</nowiki>
|}
</pre>


{| class="wikitable"
{| class="wikitable"
|-
! A
! A
! B
! B
Line 58: Line 66:


=== Heading style for left and top cells ===
=== Heading style for left and top cells ===
Sometimes it's helpful to place the legend on the left side.
Sometimes it's helpful to place the legend on the left side.


<nowiki>{| class="wikitable"
<pre>
{| class="wikitable"
|-
! ??
! ??
! 1
! 1
Line 73: Line 82:
| b1
| b1
| b2
| b2
|}</nowiki>
|}
</pre>


{| class="wikitable"
{| class="wikitable"
|-
! ??
! ??
! 1
! 1
Line 90: Line 101:


=== Sortable tables ===
=== 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.
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"
<pre>
{| class="wikitable sortable"
|-
! Steps per Octave !! Step Size  
! Steps per Octave !! Step Size  
! class="unsortable" | comments
! class="unsortable" | comments
Line 104: Line 116:
|-
|-
| 6  || 200 || Debussy loves it.
| 6  || 200 || Debussy loves it.
|}</nowiki>
|}</pre>


{| class="wikitable sortable"
{| class="wikitable sortable"
|-
! Steps per Octave !! Step Size  
! Steps per Octave !! Step Size  
! class="unsortable" | comments
! class="unsortable" | comments
Line 120: Line 133:


== Special needs ==
== Special needs ==
=== Table title or description ===
=== Table title or description ===
As to add a description or title to your table, use the pipe-plus combination <code><nowiki>|+</nowiki></code> at the beginning of the line. For better readability, you may add optional row separators (<code><nowiki>|-</nowiki></code>) around this line.


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 optional row separators (<code>|-</code>) around this line.
<pre>
 
{| class="wikitable"
<nowiki>{| class="wikitable"
|+ Title or description
|-
|+ title or description
|-
|-
! Heading A
! Heading A
Line 137: Line 148:
| Cell 3
| Cell 3
| Cell 4
| Cell 4
|}</nowiki>
|}
</pre>


{| class="wikitable"
{| class="wikitable"
|-
|+ Title or description
|+ title or description
|-
|-
! Heading A
! Heading A
Line 154: Line 165:


=== Adjusting text alignment ===
=== 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.
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 ====
==== 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 12) after a minus sign (<code>-</code>).
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 12) after a minus sign (<code>-</code>).


To make the first column left-aligned, the second center-aligned, and the third right-aligned, add the classes <code>"left-1"</code>, <code>"center-2"</code>, and <code>"right-3"</code> to the <code>"wikitable"</code> class, separated by spaces:
To make the first column left-aligned, the second center-aligned, and the third right-aligned, add the classes <code>"left-1"</code>, <code>"center-2"</code>, and <code>"right-3"</code> to the <code>"wikitable"</code> class, separated by spaces:


<nowiki>{| class="wikitable left-1 center-2 right-3"
<pre>
{| class="wikitable left-1 center-2 right-3"
|-
|-
! Left-aligned
! Left-aligned
Line 177: Line 187:
| 123.456
| 123.456
|}
|}
</nowiki>
</pre>


{| class="wikitable left-1 center-2 right-3"
{| class="wikitable left-1 center-2 right-3"
Line 196: Line 206:
If you want to override the default text alignment (which is left) for the whole table,  use <code>"center-all"</code> or <code>"right-all"</code>.
If you want to override the default text alignment (which is left) for the whole table,  use <code>"center-all"</code> or <code>"right-all"</code>.


==== for single cells ====
==== 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:


{| class="wikitable"
{| class="wikitable"
! what you want for the cell
! what you do to get it
|-
|-
| left aligned text
! What you want for the cell
| 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>
! What you do to get it
|-
|-
| style="text-align:center;" | centered text
| Left aligned text
| place <code><nowiki>style="text-align:center;" |</nowiki></code> after the opening pipe
| 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:right;" | right aligned
| style="text-align:center;" | Centered text
| place <code><nowiki>style="text-align:center;" |</nowiki></code> after the opening pipe
| Place <code>style{{=}}"text-align: center;" {{pipe}}</code> after the opening pipe
|-
|-
! headline style
| style="text-align:right;" | Right aligned
| exclamation mark instead of the pipe symbol starts the cell
| Place <code>style{{=}}"text-align: right;" {{pipe}}</code> after the opening pipe
|-
! Headline style
| Exclamation mark instead of the pipe symbol starts the cell
|}
|}


<references/>
<references />


=== Pipe symbols in cells ===
=== Pipe symbols in cells ===
The pipe character is an important meta char to MediaWiki.  
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
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.  
pipe character displayed for what it is.  
While [[Wikipedia: Help:Table #Rendering the pipe]] has some suggestions for coping with this issue, we found that adding just another pipe right after the initial pipe(s) would do as well, see following examples.
[[Wikipedia:Help:Table#Rendering the pipe|Wikipedia's help page]] has some suggestions for coping with this issue. However, adding another pipe right after the initial pipe(s) also works:


{| class="wikitable"
{| class="wikitable"
|-
|+ style="font-size: 105%;" | Compact syntax: one line per row
|+ Compact syntax: one line per row
|-
|-
! Wikitext
! Wikitext
! Rendered output
! Rendered output
|-
|-
| <syntaxhighlight lang="text">
| <pre>
{| class="wikitable"
{| class="wikitable"
|-
!| A|X !!| B|Y
!| A|X !!| B|Y
|-
|-
|| 1|2 ||| 3|4
|| 1|2 ||| 3|4
|}
|}
</syntaxhighlight>
</pre>
|
| {{(!}} class{{=}}"wikitable" style{{=}}"margin: auto auto auto auto;"
{| class="wikitable"
{{!-}}
!| A|X !!| B|Y
!{{!}} A|X !!{{!}} B|Y
|-
|-
|| 1|2 ||| 3|4
{{!!}} 1|2 {{!}}{{!!}} 3|4
|}
{{!)}}
|}
|}


{| class="wikitable"
{| class="wikitable"
|-
|+ style="font-size: 105%;" | "Airy" syntax: one line per cell
|+ “Airy” syntax: one line per cell
|-
|-
! Wikitext
! Wikitext
! Rendered output
! Rendered output
|-
|-
| <syntaxhighlight lang="text">
| <pre>
{| class="wikitable"
{| class="wikitable"
|-
!| A|X
!| A|X
!| B|Y
!| B|Y
Line 263: Line 272:
|| 3|4
|| 3|4
|}
|}
</syntaxhighlight>
</pre>
|
| {{(!}} class{{=}}"wikitable" style{{=}}"margin: auto auto auto auto;"
{{!-}}
!{{!}} A{{!}}X
!{{!}} B{{!}}Y
{{!-}}
{{!!}} 1{{!}}2
{{!!}} 3{{!}}4
{{!)}}
|}
 
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"
{| class="wikitable"
!| A|X
!| B|Y
|-
|-
|| 1|2
! A{{pipe}}X
|| 3|4
! 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 ==
todo: internal description of colspans and rowspans
todo: internal description of colspans and rowspans


Line 283: Line 319:
[http://www.tablesgenerator.com/mediawiki_tables Generate tables in MediaWiki format - TablesGenerator.com]
[http://www.tablesgenerator.com/mediawiki_tables Generate tables in MediaWiki format - TablesGenerator.com]


For example, this wiki markup
For example, this wiki markup:
<nowiki>
 
<pre>
{| class="wikitable"
{| class="wikitable"
|-
! colspan="3" | 1
! colspan="3" | 1
! 2
! 2
Line 300: Line 338:
| G
| G
| H
| H
|}</nowiki>
|}
</pre>


will be rendered into this table:
will be rendered into this table:


{| class="wikitable"
{| class="wikitable"
|-
! colspan="3" | 1
! colspan="3" | 1
! 2
! 2
Line 322: Line 362:


== See also ==
== See also ==
* [[Help:Help]]
* [[Help:Help]]
* [[Help:Editing]]
* [[Help:Editing]]

Latest revision as of 10:22, 28 December 2025

English Wikipedia has an article on:

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
|}
Title or description
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
  1. If a column has other then left-aligned text, for example by class="... right-all" (see above section(s)), cell-specific inline CSS will prioritized highest, and use style="text-align: left;" |

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:

Compact syntax: one line per row
Wikitext Rendered output
{| class="wikitable"
|-
!| A|X !!| B|Y
|-
|| 1|2 ||| 3|4
|}
A|X B|Y
1|2 3|4
"Airy" syntax: one line per cell
Wikitext Rendered output
{| class="wikitable"
|-
!| A|X
!| B|Y
|-
|| 1|2
|| 3|4
|}
A|X B|Y
1|2 3|4

Alternatively, pipe characters can be escaped using {{!}} or {{pipe}}:

Using escapes
Wikitext Rendered output
{| class="wikitable"
|-
! A{{pipe}}X
! B{{pipe}}Y
|-
| 1{{pipe}}2
| 3{{pipe}}4
|}
A|X B|Y
1|2 3|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

See also