Xenharmonic Wiki

Help:Table: Difference between revisions

← Older edit
VisualWikitext
Xenwolf (talk | contribs)
autopatrolled, Bureaucrats, confirmaccount-notify, Interface administrators, Sysops
8,705 edits
extracted from basic examples on Help:Editing # Tables
Overthink (talk | contribs)
autopatrolled
2,763 edits
 
(17 intermediate revisions by 4 users not shown)
Line 1: Line 1:
todo
{{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.


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


== Some Examples ==
== Some Examples ==


table layout without border lines
=== Table layout without border lines ===


<nowiki>{|  
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.
 
<pre>
{|  
|-
|-
! A
! A
Line 17: Line 21:
| x
| x
| xx
| xx
|}</nowiki>
|}
</pre>


{|  
{|  
Line 31: Line 36:
|}
|}


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.


<nowiki>{| class="wikitable"
<pre>
{| class="wikitable"
|-
|-
! A
! A
Line 43: Line 50:
| x
| x
| xx
| xx
|}</nowiki>
|}
</pre>


{| class="wikitable"
{| class="wikitable"
Line 57: Line 65:
|}
|}


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.


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


{| class="wikitable"
{| class="wikitable"
Line 89: Line 100:
|}
|}


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.


<nowiki>{| class="wikitable sortable"
<pre>
{| class="wikitable sortable"
|-
|-
! Steps per Octave !! Step Size  
! Steps per Octave !! Step Size  
Line 102: Line 115:
| 12 || 100 || Try this for free
| 12 || 100 || Try this for free
|-
|-
| 6  || 200 ||Debussy loves it.
| 6  || 200 || Debussy loves it.
|}</nowiki>
|}</pre>


{| class="wikitable sortable"
{| class="wikitable sortable"
Line 116: Line 129:
| 12 || 100 || Try this for free
| 12 || 100 || Try this for free
|-
|-
| 6  || 200 ||Debussy loves it.
| 6  || 200 || Debussy loves it.
|}
|}


== Special needs ==
== Special needs ==
=== 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.
<pre>
{| class="wikitable"
|+ Title or description
|-
! Heading A
! Heading B
|-
| Cell 1
| Cell 2
|-
| Cell 3
| Cell 4
|}
</pre>


=== Adjusting Text Alignment ===
{| class="wikitable"
|+ 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 <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 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:
 
<pre>
{| 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
|}
</pre>
 
{| 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
|}
 
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 ====
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
! What you do to get it
|-
| 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, and use <code>style{{=}}"text-align: left;" {{pipe}}</code></ref>
|-
| style="text-align:center;" | Centered text
| Place <code>style{{=}}"text-align: center;" {{pipe}}</code> after the opening pipe
|-
| style="text-align:right;" | Right aligned
| 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 />
 
=== 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: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"
|+ style="font-size: 105%;" | Compact syntax: one line per row
|-
! Wikitext
! Rendered output
|-
|-
| style="text-align:center;" | centered text
| <pre>
| place <code><nowiki>style="text-align:center;" |</nowiki></code> after the opening pipe
{| class="wikitable"
|-
|-
| style="text-align:right;" | right aligned
!| A|X !!| B|Y
| place <code><nowiki>style="text-align:center;" |</nowiki></code> after the opening pipe
|-
|-
! headline style
|| 1|2 ||| 3|4
| exclamation mark instead of the pipe symbol starts the cell
|}
</pre>
| {{(!}} class{{=}}"wikitable" style{{=}}"margin: auto auto auto auto;"
{{!-}}
!{{!}} A|X !!{{!}} B|Y
|-
{{!!}} 1|2 {{!}}{{!!}} 3|4
{{!)}}
|}
|}


If you want to override the default text alignment for all cells, place the inline CSS (for example <code>style="text-align:center;"</code>) directly at the beginning of the table, right after the <code>class="wikitable"</code> statement.
{| class="wikitable"
|+ style="font-size: 105%;" | "Airy" syntax: one line per cell
|-
! Wikitext
! Rendered output
|-
| <pre>
{| class="wikitable"
|-
!| A|X
!| B|Y
|-
|| 1|2
|| 3|4
|}
</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"
|-
! 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 ==
todo: internal description of colspans and rowspans


=== External helper tools ===
=== External helper tools ===
Line 148: 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 165: 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 191: Line 366:


[[Category:Help]]
[[Category:Help]]
[[Category:todo:expand|?]]
[[Category:Todo:add examples|?]]
Retrieved from "https://en.xen.wiki/w/Help:Table"