Editing Help:Tables

==General syntax==
:''Note: if you are not familiar with wiki table syntax, please, read [http://en.wikipedia.org/wiki/Help:Table#Pipe_syntax_tutorial Wikipedia's tutorial].''

To create a table, use the "Insert table" button in the editor toolbar, under the "Advanced" section. Be sure to leave the "Style with borders" option checked in the dialog that appears. Alternatively, you can manually create a similarly-styled table by entering the following:
<pre>
{| class="wikitable"
|-
! Header text
|-
| Row 1 text
|-
| Row 2 text
|}
</pre>

This will generate the following table:

{| class="wikitable"
|-
! Header text
|-
| Row 1 text
|-
| Row 2 text
|}

== Multiple headings ==
The first row is always a heading row with its unique style. If you need another row with this design, simply add class="heading" to row formatting. For example, the following code

<pre>
{| class="wikitable"
|-
! Header text
|-
| Row 1 text
|-
| Row 2 text
|- class="heading"
! Another header
|-
| Row 3 text
|-
| Row 4 text
|}
</pre>

will create this table:
{| class="wikitable"
|-
! Header text
|-
| Row 1 text
|-
| Row 2 text
|- class="heading"
! Another header
|-
| Row 3 text
|-
| Row 4 text
|}

== Table positioning ==
By default, tables are block-level elements. You can make them in-line, meaning more than one can be placed on the same line, by adding the "inline" class to the table:

{| class="wikitable inline"
|-
! Header text
|-
| Row 1 text
|-
| Row 2 text
|}
{| class="wikitable inline"
|-
! Header text
|-
| Row 1 text
|}

== Table width ==
Sometimes tables should have defined widths. In this case, you can add ''width="X"'' to table formatting for small tables. For bigger ones, use ''style="width:100%;max-width:Xpx"'' instead, so that tables scale down on smaller resolutions. Note that when defining a width, you should also '''define the width of each cell in the 1st row''' (you can define widths using either percent, ''width=number%''; or pixels, ''width=number''; it will still scale down), like in the example below:

<pre>
{| class="wikitable" style="width:100%;max-width:1000px;"
! A
! B
|-
| Lorem ipsum
| Dolor sit amet
|}
{| class="wikitable" style="width:100%;max-width:1000px;"
! width=400 | A
! width=600 | B
|-
| Lorem ipsum
| Dolor sit amet
|}
</pre>

results in:

{| class="wikitable" style="width:100%;max-width:1000px;"
! A
! B
|-
| Lorem ipsum
| Dolor sit amet
|}
{| class="wikitable" style="width:100%;max-width:1000px;"
! width=400 | A
! width=600 | B
|-
| Lorem ipsum
| Dolor sit amet
|}

If the first row has colspanned cells, it is better to define their width too, and then define width of the columns they are spanning in the next row, like this:
<pre>
{| class="wikitable" style="width:100%;max-width:1000px;"
! colspan="2" width=1000 | A
|-
| width=400 | Lorem ipsum
| width=600 | Dolor sit amet
|}
</pre>
{| class="wikitable" style="width:100%;max-width:1000px;"
! colspan="2" width=1000 | A
|-
| width=400 | Lorem ipsum
| width=600 | Dolor sit amet
|}

== Table colors ==
Tables may have different colors depending on context. This can be done by adding a class to the table after "wikitable", like this:

<pre>
{| class="wikitable archivists"
|-
! Header text
|-
| Lorem ipsum
|-
| Dolor sit amet
|}</pre>

{| class="wikitable archivists"
|-
! Header text
|-
| Lorem ipsum
|-
| Dolor sit amet
|}

=== List of table classes ===
The following classes can be added after "wikitable" to modify the table's colors:

{| class="wikitable" style="width:100%;max-width:600px"
|-
! colspan="2" | Guild colors
|-
! class="analysts" style="width:200px" | analysts 
| class="analysts" | 
|-
! class="archivists" | archivists
| class="archivists" |
|-
! class="books" | books
| class="books" |
|-
! class="caterers" | caterers
| class="caterers" |
|-
! class="chemists" | chemists
| class="chemists" |
|-
! class="engineers" | engineers
| class="engineers" |
|-
! class="greeters" | greeters
| class="greeters" |
|-
! class="healers" | healers
| class="healers" |
|-
! class="inkmakers" | inkmakers
| class="inkmakers" |
|-
! class="legislators" | legislators
| class="legislators" |
|-
! class="linguists" | linguists
| class="linguists" |
|-
! class="maintainers" | maintainers
| class="maintainers" |
|-
! class="mechanists" | mechanists
| class="mechanists" |
|-
! class="messengers" | messengers
| class="messengers" |
|-
! class="miners" | miners
| class="miners" |
|-
! class="stonemasons" | stonemasons
| class="stonemasons" |
|-
! class="surveyors" | surveyors
| class="surveyors" |
|-
! class="writers" | writers
| class="writers" |
|}

== Other table classes ==
There is also a '''sortable''' class that can be added to make a table sortable:

<pre>
{| class="wikitable sortable"
|-
! Column A !! Column B
|-
| Alpha || Sigma
|-
| Beta || Epsilon
|-
| Gamma || Omega
|}
</pre>

{| class="wikitable sortable"
|-
! Column A !! Column B
|-
| Alpha || Sigma
|-
| Beta || Epsilon
|-
| Gamma || Omega
|}

== See also ==
* [[w:Help:Sorting|Wikipedia's Help:Sorting]] page, for all details about sortable tables.
* [[mw:MediaWiki talk:CollapsibleTables.js]] - For tables that can be collapsed via show/hide buttons to show or hide the content apart from the table headers.
* [[GoArch:Color schemes]]

{{Help navbox}}