Warning: jsMath requires JavaScript to process the mathematics on this page.
If your browser supports JavaScript, be sure it is enabled.
View source

From QED

for Help:Tables
Jump to: navigation, search
You can view and copy the source of this page:
{{{{SITENAME}}/Help}}
For general help about tables, see [http://meta.wikimedia.org/wiki/Help:Table Help:Table]. For some examples, visit this [[Help:Tables/Gallery|gallery]].

For help about color names that can be used with tables, see [[MediaWiki:Color Names|Color Names]].

For details about dynamically generating tables based on a web-accessible data source, see [[Help:External Data]].

==Predefined Table Classes==
The pre-defined table classes defined on the [[MediaWiki:Common.css]] page are universally available and currently include '''wikitable''', '''sortable''', '''datatable''', and '''[[Help:zebra|zebra]]'''.

The effect of adding '''class=wikitable''' and/or '''class=datatable''' is illustrated by the following examples. Notice how the "datatable" class adds a hover effect when the mouse hovers over a row of data.
{{clr}}
{|
|
{| 
! colspan=2 | (no class specified)
|- 
! Glyph !! Entity Name
|-
| &copy; || &amp;copy;
|-
|} 
| &nbsp;
| &nbsp;
{| class=datatable
! colspan=2 | class=datatable
|- 
! Glyph !! Entity Name
|-
| &copy; || &amp;copy;
|-
|} 
| &nbsp;
| &nbsp;
{| class=wikitable
! colspan=2 | class=wikitable
|- 
! Glyph !! Entity Name
|-
| &copy; || &amp;copy;
|-
|} 
| &nbsp;
| &nbsp;
{| class="datatable wikitable"
! colspan=2 | class="datatable wikitable"
|- 
! Glyph !! Entity Name
|-
| &copy; || &amp;copy;
|-
|} 
|}

These tables were produced by the same wikitable markup except for the class specifications as indicated:
<blockquote style="background: cornflowerblue; width:20em;">
<pre>
{| class=CLASSES
! colspan=2 | class=CLASSES
|- 
! Glyph !! Entity Name
|-
| &amp;copy; || &amp;amp;copy;
|-
|} 
</pre>
</blockquote>

The [[Help:zebra|zebra]] class can be used to alternate colors in the rows of one or more tables on a page. Further examples and variations, including '''class=toccolours''', are on the [[Help_talk:Table|discussion page]].

==Sortable Tables==
Sortable tables can be created on a page by using wikitable and/or HTML syntax.

For example, you should be able to sort the rows of the following table in various ways by clicking on the column headings.

{| class=sortable
!  M || N || A
|-
| 12 || 78 || a
|-
| 14 || 76 || xyz
|-
| 16 || 74 || ab
|}

Notice the vertical arrows that appear.

Here is the same table using class="sortable wikitable":

{| class="sortable wikitable"
!  M || N || A
|-
| 12 || 78 || a
|-
| 14 || 76 || xyz
|-
| 16 || 74 || ab
|}

===Notes===
* class=sortable is only intended for use with simple tables (matrices).
* A column's type is determined by the first non-blank data element in the selected column.
<!-- * The column type can be specified explicitly using a "hidden element" (see below) but is normally inferred. -->
* All rows in the body of the table will be sorted except for the last row if it is marked "class=sortbottom" (see below).
* All columns will be marked as sortable except for columns marked "class=unsortable" (see below).
* The following types are currently recognized:
** dates (DD-MM-YYYY or DD-MM-YY or DD AAA YYYY)
** currencies ($, £, €, or ¥)
** numbers
** parenthesized numbers (this is a {{qed}} extension)
** strings
<!-- To force a column to be sorted as a list of strings, the first non-blank data element should be (or begin with) the following:
<nowiki>{{hide|&}}</nowiki>. 
-->
For further details, see [[wikipedia:Help:Sorting|Help:Sorting]] but note that currently, type declarations are not yet supported.
<!-- use <nowiki>{{hide|TEXT}}</nowiki> to hide text. -->

==Sortable Tables with wikitable Syntax==

Simply mark your table as sortable, e.g. by declaring class=sortable or class="sortable wikitable", as shown using the following wikimarkup, which is rendered as shown above:

<pre>
{| class=sortable
|-
!  M ||  N ||  A
|-
| 12 || 78 || a
|-
| 14 || 76 || xyz
|-
| 16 || 74 || ab
|}
</pre>

===class=unsortable and class=sortbottom===
The following wikimarkup produces the table below:
<pre>
{| class="wikitable sortable" style="text-align:right"
!Numberic!!Alphabetic!!Dates!!Currency!!class="unsortable"|Unsortable
|-
|1||Z||02-02-2004||5.00||This
|-
|2||y||13-apr-2005||||Column
|-
|3||X||17.aug.2006||6.50||Is
|-
|4||w||01.Jan.2005||4.20||Actually
|-
|5||V||05/12/2006||7.15||Unsortable
|- class="sortbottom" 
! Totals:{{0|000}}15!! !! !! style="text-align:right;" | 29.55 !!
|-
|}
</pre>
{| class="wikitable sortable" style="text-align:right"
!Numeric!!Alphabetic!!Dates!!Currency!!class="unsortable"|Unsortable
|-
|1||Z||02-02-2004||5.00||This
|-
|2||y||13-apr-2005||||Column
|-
|3||X||17.aug.2006||6.50||Is
|-
|4||w||01.Jan.2005||4.20||Actually
|-
|5||V||05/12/2006||7.15||Unsortable
|- class="sortbottom" 
! Totals:{{0|000}}15!! !! !! style="text-align:right;" | 29.55 !!
|-
|}

In the last row of the table, the {{((}}[[Template:0|0]]|000}} is for alignment. An alternative would be to use non-breaking spaces, e.g. {{((}}[[Template:repeat|repeat]]|&amp;nbsp;|6}} would insert six non-breaking spaces.

==Sortable Tables with HTML Syntax==
To specify that a table is to be interactively sortable, add "sortable" to the table's list of classes as illustrated above.

For example:

 <pre><table class="sortable"></pre>

===Examples===
To see the HTML, press the page's '''edit''' or '''view''' tab, or the section's '''edit''' link if it appears.

<html>
<table class="sortable" cellspacing=2 style="text-align:right">

<!-- BROWSERS HAVE PROBLEMS WITH align="CHAR" char="." -->
<col ></col><col width="100px"></col>

  <tr>
    <th>Name</th><th>Salary</th><th>Extension</th><th>Start date</th>
  </tr>

  <tr><td>Bloggs, Fred</td><td>$12000.00</td>

      <td>1353</td><td>18/08/2003</td></tr>
  <tr><td>Turvey, Kevin</td><td>$191200.00</td>
      <td>2342</td><td>02/05/1979</td></tr>
  <tr><td>Mbogo, Arnold</td><td>$32010.12</td>
      <td>2755</td><td>09/08/1998</td></tr>

  <tr><td>Shakespeare, Bill</td><td>$122000.00</td>
      <td>3211</td><td>12/11/1961</td></tr>
  <tr><td>Shakespeare, Hamnet</td><td>$9000.00</td>
      <td>9005</td><td>01/01/2002</td></tr>
  <tr><td>Fitz, Marvin</td><td>$3300.00</td>

      <td>5554</td><td>22/05/1995</td></tr>
</table>

<br/><br/>

<TABLE border="1" class="sortable" style="text-align:right">
<COLGROUP>
<COL><COL align="right">
</COLGROUP>

<TR><TH>Vegetable <TH>Cost per kilo</TR>
<TBODY>
<TR><TD>Lettuce        <TD>$1.00
<TR><TD>Silver carrots <TD>$10.50
<TR><TD>Golden turnips <TD>$100.30
</colgroup>
</TABLE>

<br/><br/>
</html>

==Alignment==
The alignment of the content of cells within a table is governed by cell-specific specifications, row-specific specifications, and table-specific specifications. The most specific specification overrides all others.

There is no direct way to specify alignment for a specific column.

For horizontal alignment, style="text-align:X;" may be used, where X is one of left, right, center, or justified.

For vertical alignment of the contents of a cell within the cell, use valign=POSITION or style=vertical-align:POSITION where ''POSITION'' is one of ''top'', ''bottom'', or ''middle''.

For alignment of the decimal point within a column of numbers, [[Template:0]] may be useful. This template inserts characters invisbly. For example it has been used in the following table:

{| class=wikitable
|-
| 12.01
|-
| {{0}}0.0
|}

===Examples===
In the first example, the specification for the table as a whole is "text-align:right" but the headings each have their own specifications:
<pre>
{| style="text-align:right"
!width=100 align=left|LEFT
!width=100 align=center|CENTER
!width=100 align=right|RIGHT
|-
| a || b || c
|}
</pre>
produces:
{| style="text-align:right"
!width=100 align=left|LEFT
!width=100 align=center|CENTER
!width=100 align=right|RIGHT
|-
| a || b || c
|}


In the next example, vertical-align and valign are both used:
{|
! style="vertical-align:top" | This is the top <br/> of the cell
! style="vertical-align:bottom" | This is the bottom of the cell
! valign=top | This is the top <br/> of the cell
|}

==Alignment of Columns of Consecutive Tables==

One approach is to specify the width of the corresponding columns as a percentage, as illustrated here:
=== 8th century ===
{| class="wikitable" width="100%"
! style="width:6%" | Year || style="width:10%" | Date || Event
|-
| 795 ||  || First Viking raids
|}

=== 9th century ===
{| class="wikitable" width="100%"
! style="width:6%" | Year || style="width:10%" | Date || Event
|-
| 852 ||  || Vikings [[wikipedia:Ivar Beinlaus|Ivar Beinlaus]] and [[wikipedia:Olaf the White|Olaf the White]] land in Dublin Bay
|}

The wikitext for the first of these two tables is as follows:
<pre>
{| class="wikitable" width="100%"
! style="width:6%" | Year || style="width:10%" | Date || Event
|-
| 795 ||  || First Viking raids
|}
</pre>

==Style==
The stylistic aspects of a table can be controlled using [[Help:CSS|CSS]], either indirectly using templates (see below), or directly, e.g. by adding "style=" specifications to the markup for the table, or by using CSS rules. See [[Help:CSS]] for further details. Here we illustrate how the color and thickness of row dividers can be modified by using

<nowiki>|- style="border-top:3px solid orange;"</nowiki>

instead of

<nowiki>|-</nowiki>


{| class=wikitable
!Date!!Speaker!!Title
|- 
|| September 15 || Frédéric Passy|| Universal Peace
|- 
|September 22 || Henry Dunant||ICRC
|- style="border-top:3px solid orange;"
|October 6||Theodore Roosevelt||The Treaty of Portsmouth
|- 
|October 13||Arthur Henderson||Disarmament
|- style="border-top:3px solid orange;"
|November 24 ||Cordell Hull||UN
|}

See also [[Help:Specifying Colors in Tables]].

==Quizzes==
The <nowiki><memorize></nowiki> tag allows tables to be turned into interactive quizzes, as illustrated by the following example.  

{| align=center class=wikitable
|+ '''Flags'''
! Polity <memorize /> !! Flag <memorize />
|-
| Australia|| [[Image:Flag of Australia.svg|50px]]
|-
| CIS || [[Image:Flag of the CIS.svg|50px]]
|-
| EU || [[Image:European flag.svg|50px]]
|}

To turn the table into a quiz, click on one of the '''memorize''' links. See [[Help:Memorize]] for further details.

==Conversion to and from WikiTable Syntax==

===From Microsoft Excel&reg;===
An online copy-and-paste tool for converting from Excel&reg; is available [http://people.fas.harvard.edu/~sdouglas/table.cgi here]. For large spreadsheets, it may be advisable to export to a format such as CSV and then proceed from there.

===From Microsoft Word&reg;===
To convert a table in Microsoft Word&reg; to WikiTable syntax, you may have some success by simply copying-and-pasting into the above-mentioned online tool for Excel. In general, though, it may be better to copy-and-paste the table into an Excel spreadsheet first and proceed from there.

===From CSV or TSV===
To convert CSV to WikiTable format, you may find the online [http://area23.brightbyte.de/csv2wp.php CSV Converter] helpful. This supports both copy-and-paste and file uploads. See also [[#Other|Other]] below.

===HTML===
A fast, online, and accurate service for converting to or from HTML table syntax is available [http://www.cnic.org/html2mediawiki.html here].

===Other===
Other services are described [http://meta.wikimedia.org/wiki/Help:Table#External_links here].

The [mailto:qed@princeton.edu {{qed}} support staff] in the Educational Technologies Center has additional tools and may be able to help with other conversion needs.

==Table-Related Templates==

The following table illustrates [[Template:yes]], [[Template:no]], [[Template:dunno]], and [[Template:partial]]:

{| class=wikitable
! name
! <nowiki>{{name|}}</nowiki>
! <nowiki>{{name}}</nowiki>
! <nowiki>{{name|text}}</nowiki>
|-
| yes || {{yes|}} || {{yes}} || {{yes|Oui}} 
|-
| no || {{no|}} || {{no}} || {{no|Non}} 
|-
| dunno || {{dunno|}} || {{dunno}} || {{dunno|n.a.}} 
|-
| partial || {{partial|}} || {{partial}} || {{partial|Comme ci comma &ccedil;a}} 
|}

For example, the "yes" row above is generated by the following line:
<pre>
 | yes || {{yes|}} || {{yes}} || {{yes|Oui}} 
</pre>


The {{tl|bgc}} "background-color" template abbreviates specifications involving background-colors. It is especially useful when creating a table in which row colors vary.  See [[Template:bgc]] for examples and further details.

The {{tl|rh}} "row-header" template is also often useful:

{| class=wikitable
! <nowiki>{{rh}} | </nowiki>|| <nowiki>{{rh}} | Header Style</nowiki> || <nowiki>{{rh|bg=cyan}} | Cyan background</nowiki>
|-
| {{rh}} | || {{rh}} | Header Style || {{rh|bg=cyan}} | Cyan background
|-
| Each cell in the above row uses the rh template as indicated in the previous row. || The style of this third row is determined by the CSS class of the table: || class=wikitable
|}

For other ''Table cell templates'', see [[Template:Table cell templates]].

For other table-related templates, see [[:Category:Table Template]].

==See also==
* [[Help:Specifying Colors in Tables]]
* [[Help:Timeline]]
* [[Help:Boxed text]]
[[Category:MediaWiki Extensions]]
Templates used on this page: