Help:Table: Difference between revisions

ArrowHead294 (talk | contribs)
ArrowHead294 (talk | contribs)
mNo edit summary
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.
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 9:
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 20:
| x
| x
| xx
| xx
|}</nowiki>
|}
</pre>


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


{| class="wikitable"
{| class="wikitable"
|-
! A
! A
! B
! B
Line 58: 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.
Sometimes it's helpful to place the legend on the left side.


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


{| class="wikitable"
{| class="wikitable"
|-
! ??
! ??
! 1
! 1
Line 90: 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.
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 107: Line 118:


{| 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 132:


== 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 147:
| 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 164:


=== 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.


Line 162: Line 171:
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 176: Line 186:
| 123.456
| 123.456
|}
|}
</nowiki>
</pre>


{| class="wikitable left-1 center-2 right-3"
{| class="wikitable left-1 center-2 right-3"
Line 199: Line 209:


{| class="wikitable"
{| class="wikitable"
|-
! What you want for the cell
! What you want for the cell
! What you do to get it
! What you do to get it
Line 215: Line 226:
|}
|}


<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"
|-
|+ Compact syntax: one line per row
|+ Compact syntax: one line per row
|-
|-
Line 233: Line 242:
| <syntaxhighlight lang="text">
| <syntaxhighlight lang="text">
{| class="wikitable"
{| class="wikitable"
|-
!| A|X !!| B|Y
!| A|X !!| B|Y
|-
|-
Line 238: Line 248:
|}
|}
</syntaxhighlight>
</syntaxhighlight>
|
|  
{| class="wikitable"
{| class="wikitable"
|-
!| A|X !!| B|Y
!| A|X !!| B|Y
|-
|-
Line 247: Line 258:


{| class="wikitable"
{| class="wikitable"
|-
|+ "Airy" syntax: one line per cell
|+ “Airy” syntax: one line per cell
|-
|-
! Wikitext
! Wikitext
Line 273: Line 283:


== Combining table cells ==
== Combining table cells ==
todo: internal description of colspans and rowspans
todo: internal description of colspans and rowspans


Line 281: Line 290:
[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 298: Line 309:
| 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 320: Line 333:


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