Help:Tables: Difference between revisions

From Guild of Archivists
(Created page with "==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].''...")
 
(Added instructions for making tables collapsible.)
 
(One intermediate revision by the same user not shown)
Line 217: Line 217:


== Other table classes ==
== Other table classes ==
There is also a '''sortable''' class that can be added to make a table sortable:
=== Sortable ===
Using the '''sortable''' class will add sorting buttons to the column headers:


<pre>
<pre>
Line 233: Line 234:


{| class="wikitable sortable"
{| class="wikitable sortable"
|-
! Column A !! Column B
|-
| Alpha || Sigma
|-
| Beta || Epsilon
|-
| Gamma || Omega
|}
=== Collapsible ===
The '''mw-collapsible''' class adds a "collapse" link in the table header, enabling you to collapse large tables. To show the table collapsed by default, also include the '''mw-collapsed''' class. You may wish to add a separate table header row with the name of the table, so that the "collapse" link doesn't get appended to the last column's header.
<pre>
{| class="wikitable mw-collapsible mw-collapsed"
|-
! colspan="2" | Table name
|-
! Column A !! Column B
|-
| Alpha || Sigma
|-
| Beta || Epsilon
|-
| Gamma || Omega
|}
</pre>
{| class="wikitable mw-collapsible mw-collapsed"
|-
! colspan="2" | Table name
|-
|-
! Column A !! Column B
! Column A !! Column B
Line 245: Line 277:
== See also ==
== See also ==
* [[w:Help:Sorting|Wikipedia's Help:Sorting]] page, for all details about sortable tables.
* [[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]]
* [[GoArch:Color schemes]]
{{Help navbox}}

Latest revision as of 18:41, 8 January 2018

General syntax[edit source]

Note: if you are not familiar with wiki table syntax, please, read 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:

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

This will generate the following table:

Header text
Row 1 text
Row 2 text

Multiple headings[edit source]

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

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

will create this table:

Header text
Row 1 text
Row 2 text
Another header
Row 3 text
Row 4 text

Table positioning[edit source]

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:

Header text
Row 1 text
Row 2 text
Header text
Row 1 text

Table width[edit source]

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:

{| 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
|}

results in:

A B
Lorem ipsum Dolor sit amet
A 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:

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

Table colors[edit source]

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

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

List of table classes[edit source]

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

Guild colors
analysts
archivists
books
caterers
chemists
engineers
greeters
healers
inkmakers
legislators
linguists
maintainers
mechanists
messengers
miners
stonemasons
surveyors
writers

Other table classes[edit source]

Sortable[edit source]

Using the sortable class will add sorting buttons to the column headers:

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

Collapsible[edit source]

The mw-collapsible class adds a "collapse" link in the table header, enabling you to collapse large tables. To show the table collapsed by default, also include the mw-collapsed class. You may wish to add a separate table header row with the name of the table, so that the "collapse" link doesn't get appended to the last column's header.

{| class="wikitable mw-collapsible mw-collapsed"
|-
! colspan="2" | Table name
|-
! Column A !! Column B
|-
| Alpha || Sigma
|-
| Beta || Epsilon
|-
| Gamma || Omega
|}
Table name
Column A Column B
Alpha Sigma
Beta Epsilon
Gamma Omega

See also[edit source]


Content in this section is based on the help documents for Wikipedia and the Guild Wars 2 Wiki. In accordance with the Guild Wars 2 Wiki's licensing terms, the material on this page is licensed under the GNU Free Documentation License (GFDL) 1.2.