Help:Tables
From QED
| Help |
|
| Related topics |
For general help about tables, see Help:Table. For some examples, visit this gallery.
For help about color names that can be used with tables, see Color Names.
For details about dynamically generating tables based on a web-accessible data source, see Help:External Data.
Contents |
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 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.
|
|
|
| |||||||||||||||||||||||||||
These tables were produced by the same wikitable markup except for the class specifications as indicated:
{| class=CLASSES
! colspan=2 | class=CLASSES
|-
! Glyph !! Entity Name
|-
| © || ©
|-
|}
The 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 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.
| 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":
| 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.
- 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
For further details, see Help:Sorting but note that currently, type declarations are not yet supported.
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:
{| class=sortable
|-
! M || N || A
|-
| 12 || 78 || a
|-
| 14 || 76 || xyz
|-
| 16 || 74 || ab
|}
class=unsortable and class=sortbottom
The following wikimarkup produces the table below:
{| 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 !!
|-
|}
| Numeric | Alphabetic | Dates | Currency | 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 |
| Totals:15 | 29.55 |
In the last row of the table, the {{0|000}} is for alignment. An alternative would be to use non-breaking spaces, e.g. {{repeat| |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:
<table class="sortable">
Examples
To see the HTML, press the page's edit or view tab, or the section's edit link if it appears.
| Name | Salary | Extension | Start date |
|---|---|---|---|
| Bloggs, Fred | $12000.00 | 1353 | 18/08/2003 |
| Turvey, Kevin | $191200.00 | 2342 | 02/05/1979 |
| Mbogo, Arnold | $32010.12 | 2755 | 09/08/1998 |
| Shakespeare, Bill | $122000.00 | 3211 | 12/11/1961 |
| Shakespeare, Hamnet | $9000.00 | 9005 | 01/01/2002 |
| Fitz, Marvin | $3300.00 | 5554 | 22/05/1995 |
| Vegetable | Cost per kilo |
|---|---|
| Lettuce | $1.00 |
| Silver carrots | $10.50 |
| Golden turnips | $100.30 |
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:
| 12.01 |
| 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:
{| style="text-align:right"
!width=100 align=left|LEFT
!width=100 align=center|CENTER
!width=100 align=right|RIGHT
|-
| a || b || c
|}
produces:
| LEFT | CENTER | RIGHT |
|---|---|---|
| a | b | c |
In the next example, vertical-align and valign are both used:
| This is the top of the cell | This is the bottom of the cell | This is the top 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
| Year | Date | Event |
|---|---|---|
| 795 | First Viking raids |
9th century
| Year | Date | Event |
|---|---|---|
| 852 | Vikings Ivar Beinlaus and Olaf the White land in Dublin Bay |
The wikitext for the first of these two tables is as follows:
{| class="wikitable" width="100%"
! style="width:6%" | Year || style="width:10%" | Date || Event
|-
| 795 || || First Viking raids
|}
Style
The stylistic aspects of a table can be controlled using 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
|- style="border-top:3px solid orange;"
or equivalently
|- {{divider|orange}}
instead of
|-
| Date | Speaker | Title |
|---|---|---|
| September 15 | Frédéric Passy | Universal Peace |
| September 22 | Henry Dunant | ICRC |
| October 6 | Theodore Roosevelt | The Treaty of Portsmouth |
| October 13 | Arthur Henderson | Disarmament |
| November 24 | Cordell Hull | UN |
See also Template:Divider and Help:Specifying Colors in Tables.
Quizzes
The <memorize> tag allows tables to be turned into interactive quizzes, as illustrated by the following example.
| Polity (memorize) | Flag (memorize) |
|---|---|
| Australia | 
|
| CIS | 
|
| EU | 
|
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®
An online copy-and-paste tool for converting from Excel® is available here. For large spreadsheets, it may be advisable to export to a format such as CSV and then proceed from there.
From Microsoft Word®
To convert a table in Microsoft Word® 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 CSV Converter helpful. This supports both copy-and-paste and file uploads. See also Other below.
HTML
A fast, online, and accurate service for converting to or from HTML table syntax is available here.
Other
Other services are described here.
The 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:
| name | {{name|}} | {{name}} | {{name|text}} |
|---|---|---|---|
| yes | Yes | Oui | |
| no | No | Non | |
| dunno | ? | n.a. | |
| partial | Partial | Comme ci comma ça |
For example, the "yes" row above is generated by the following line:
| yes || {{yes|}} || {{yes}} || {{yes|Oui}}
The {{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 {{rh}} "row-header" template is also often useful:
| {{rh}} | | {{rh}} | Header Style | {{rh|bg=cyan}} | Cyan background |
|---|---|---|
| Header Style | 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.
