Help:Table: Difference between revisions

From Xenharmonic Wiki
Jump to navigation Jump to search
Xenwolf (talk | contribs)
expanded, still something to do
Xenwolf (talk | contribs)
for whole columns: text-align classes for columns expanded up to (left|center|right)-12
Line 157: Line 157:
==== 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 9) 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>).


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

Revision as of 18:44, 14 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
|}
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 "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 (-).

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

See also