Help:Table

 ( Wikipedia How-to ) 

Cell Col Row Scope

Rank: 100%

     
Example
Example
Example
     

'''{|'''
  ''table code goes here''
     '''|}'''
     

{|
     '''|  ''caption'''''
  ''table code goes here''
|}
     

{|
|  The table's caption
     '''|-'''
  ''row code goes here''
     '''|-'''
  ''next row code goes here''
|}
     

{|
|  The table's caption
|-
     '''|''' ''cell code goes here''
|-
     '''|''' ''next row cell code goes here''
     '''|''' ''next cell code goes here''
|}
     

{|
|  The table's caption
|-
     '''|Cell 1 || Cell 2 || Cell 3'''
|-
     '''|Cell A'''
     '''|Cell B'''
     '''|Cell C'''
|}
     

{| border="1"
|-
|format modifier (not displayed) '''|'''These all  '''|'''(including the pipes) '''|'''go into  '''|'''the first cell||second cell
|-
|format  '''|'''These all  '''||'''format '''|'''go into  '''|'''the second cell
|}
     

{| border="1"
|-
| Cell 1 (no modifier—not aligned)
|-
| align="right" | Cell 2 (right aligned)
|}
     

{|
|  The table's caption
     '''! scope="col" | Column heading 1'''
'''! scope="col" | Column heading 2'''
'''! scope="col" | Column heading 3'''
|-
| Cell 1 || Cell 2 || Cell 3
|-
| Cell A
| Cell B
| Cell C
|}
     

{|
|  The table's caption
! scope="col" | Column heading 1
! scope="col" | Column heading 2
! scope="col" | Column heading 3
|-
     '''! scope="row" | Row heading 1'''
| Cell 2 || Cell 3
|-
     '''! scope="row" | Row heading A'''
| Cell B
| Cell C
|}
     

{| '''border="1"'''
|  The table's caption
! scope="col" | Column heading 1
! scope="col" | Column heading 2
! scope="col" | Column heading 3
|-
! scope="row" | Row heading 1
| Cell 2 || Cell 3
|-
! scope="row" | Row heading A
| Cell B
| Cell C
|}
     

     
The table's caption
! Column heading 1
! Column heading 2
! Column heading 3

     

     
A
B
C
D
     

     
B
D
     

     
Multiplication table

     

     
ghi
pqr
yz
     

     
 
 
 
Green star
     

     
 
 
 
Green star
     

This paragraph is before the table.  Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod...
     

     
Col 1, row 1
Col 2, row 1 (and 2)
Col 3, row 1
Col 1, row 2
Col 3, row 2
     

Note the floating-table to the right.
     

This paragraph is after the table.  The text in column 2
will span both rows due to format specifier "rowspan=2" so there
is no coding for "Col 2" in the 2nd row, just: Col 1 & Col 3.
     

Text before table...
     
Cells left-aligned, table centered
! scope="col"
Duis
! scope="col"
aute
! scope="col"
irure
in voluptate velit
pariatur.
...text after table
     

     

     
ghi
pqr
yz
     
     

     
abc
def
 ghi 
jkl
     

     
yz
yz
yz
     

     
cell2
cell3
     

     
1
2
     

     
All versions
All versions
     

     
This column is 100 points wide
This column is 200 points wide
This column is 300 points wide
bluh
     

Text before centered table...
     
An example table
upper left
 
right side
lower left
lower middle
Text before a nested table...
{ border="0"
     
A table in a table
 
 
Two Wikipedia logos
...text after a nested table
|}
...text after centered table
     

     

 Temple of Bel (floating).
     

     
Column 3
A
B
C
D
E
F
G
H
     

     
.1
.21
.321
     

     
{ cellpadding="0" cellspacing="0" width="100"
     
.1
|-
|
     
.21
|-
|
     
.321
|}
     

432.1
 43.21
  4.321
     

432.1
 43.21
  4.321
     

{| style="margin: 1em auto 1em auto;"

{|

simply by replacing inline CSS for the table by class="wikitable". This is because the wikitable class in contains a number of table.wikitable style rules. These are all applied at once when you mark a table with the class. You can then add additional style rules if desired. These override the class's rules, allowing you to use the class style as a base and build up on it:

Wiki markup

{|

As it appears in a browser:

Notice that the table retains the gray background of the wikitable class, and the headers are still bold and centered. But now the text formatting has been overridden by the local style statement; all of the text in the table has been made italic and 120% normal size, and the wikitable border has been replaced by the red dashed border.

Of course this works only for browsers supporting inline CSS, if it's important use XHTML markup like &lt;big&gt; instead of "font-size:120%", or Wiki markup like <nowiki></nowiki> instead of "font-style:italic".

     
Content which starts hidden
more hidden content
     

Gives:

>

{
class="wikitable sortable mw-collapsible"
Content which starts visible
more visible content
     

     
>
class="wikitable sortable mw-collapsible mw-collapsed"
Content which starts hidden
more hidden content
     

     

     
     
 

 Sorting
     
     

     
 
 
Tables can be made sortable by adding class="sortable"; for details see Sorting. Since this can be very useful, it is wise to keep the possibilities and limitations of this feature in mind when designing a table. For example:
     

 

Do not divide a table into sections by subheaders spanning several rows. Instead, an extra column can be made showing the content of these headers on each row, in a short form.
 
 

Do not have elements spanning several columns; instead, again, repeat the content on each row, in a short form.
 
 

In a column of numbers, do not put text such as "ca." before or after a number – it will break numerical sorting. Do not put any text or alphabetical characters in any cell of a column to be sorted numerically. Try not to put a range of numbers (it does not affect the sorting position for numeric sorting mode, and in the case of a range, the first number determines the position, but if, possibly after sorting this or another column, the element is at the top, it will induce alphabetic sorting mode). Instead, put these texts in a separate column. Alternatively, for the greatest flexibility, alphabetic sorting mode with hidden sortkeys can be used.
 
     

A long form of abbreviated content can be put as legend outside the table.
     

     Wiki markup
     

     

     As it appears in a browser:
     

     
Sortable table
This
column
cannot
be
sorted.
     
     

     

     
     
 

 Numerical and year sorting problems
     
     

     
See Sorting.
     

     

     
     
 

 Sorting and collapsing
     
     

     
It is possible to collapse a sortable table. To do so, you need to use the code
{| class="wikitable sortable collapsible". Taking the above table and making it collapsable gives you this:
     

     Wiki markup
     
|}
     

     As it appears in a browser:
     

     
Sortable and collapsible table
This
column
cannot
be
sorted.
     
     

If you want the table to default to collapsed state, use the code {| class="wikitable sortable collapsible collapsed" in place of {| class="wikitable sortable collapsible"
     

     

     
     
 

 Section link to a row
     
     

     
To create an anchor for a section link to reference a row of a table add an '''id="section link anchor name"''' parameter to the row start '''|-''' or <nowiki></nowiki>:
     
{|
     
     

     
<nowiki></nowiki>
     
Note that each anchor names must be different from every other in the page (this includes heading names), to create valid XHTML.
     

     

     
     
 

 Row template
     
     

     
Regardless of whether wikitable format or HTML is used, the wikitext of the rows within a table, and sometimes even within a collection of tables, has much in common, e.g.:
     

 

the basic code for a table row
 
 

code for color, alignment, and sorting mode
 
 

fixed texts such as units
 
 

special formats for sorting
 
     
In that case it can be useful to create a template that produces the syntax for a table row, with the data as parameters. This can have many advantages:
     

 

easily changing the order of columns, or removing a column
 
 

easily adding a new column if many elements of the new column are left blank (if the column is inserted and the existing fields are unnamed, use a named parameter for the new field to avoid adding blank parameter values to many template calls)
 
 

computing fields from other fields, e.g. population density from population and area
 
 

duplicating content and providing span tags with "display:none" for the purpose of having one format for sorting and another for display
 
 

easy specification of a format for a whole column, such as color and alignment
 
     

Example:
     

Using
     
     
     
gives:
     
     

     

     
     
 

 Conditional table row
     
     

     
 
For a conditional row in a table, we can have:
     
     

 
 
 
 
     
! scope="row"  row three, column one row three, column two
     
     
     
Which gives the following table: (note how the second row is missing)
     

 
 
 
 
     
! scope="row"  row three, column one row three, column two
     
     
     

     

     
     
 

 Other table syntax
     
     

     
Other types of table syntax that MediaWiki supports:
     

 

XHTML
 
 

HTML & wiki-|} syntax ( Do not use)
 
     

All three are supported by MediaWiki and create (currently) valid HTML output, but the pipe syntax is the simplest. Also, HTML & wiki-{| syntax (i.e., unclosed |} and {| tags) will not necessarily remain browser-supported in the future, especially on handheld internet-accessible devices.
     

See also . Note however that the thead, tbody, tfoot, colgroup, and col elements are currently not supported in MediaWiki.
     

     

     
     
 

 Comparison of table syntax
     
     

     
     
! scope="col" XHTML
! scope="col" 
Wiki-pipe

|-
! scope="row" | Caption
| 
caption
| 
|  caption
|-
! scope="row" | Row
| 

| 
|-
|-
! scope="row" | Data cell
| 
cell1cell2
     cell3
| 
| cell1 || cell2
| cell3
|-
! scope="row" | Header cell
| 
     
column heading

row heading
     
| 
! scope="col" | column heading

! scope="row" | row heading
|-
! scope="row" rowspan="2" | Sample table
| colspan="2" |
     
2
4
|-
| 

     

     
1
     
2
     
     

     
3
     
4
     
     
     
| 
2
4
|- style="vertical-align: top;"
! scope="row" | Pros
|
     

 

Can preview or debug with any XHTML editor
 
 

Can be indented for easier reading
 
 

Well-known
 
 

Insensitive to newlines
 
 

No characters like "|" which can collide with template and parser function syntax
 
     
|
     

 

Easy to write
 
 

Easy to read
 
 

Takes little space
 
 

Can be learned quickly
 
     
|- style="vertical-align: top;"
! scope="row" | Cons
|
     

 

Tedious
 
 

Takes a lot of space
 
 

Difficult to read quickly
 
 

Debugging more difficult due to tag pairing requirements
 
 

Indented code might not match nesting.
 
 

Confusing newline behaviour as they only occasionally break cells.
 
     
|
     

 

Unfamiliar syntax for experienced HTML editors
 
 

Rigid structure
 
 

Cannot be indented for clarity
 
 

HTML tag text may be easier to read than pipes, plus signs, dashes, etc.
 
 

Requires using  to pass a "|" in a parameter.
 
 

Sensitive to newlines; see Newlines and spaces.
 
     
|-
! scope="col" |
! scope="col" | XHTML
! scope="col" | Wiki-pipe
|}
See also .
     

     

     
     
 

 Pipe syntax in terms of the HTML produced
     
     

     
The pipe syntax, developed by  , substitutes pipes (|}) for HTML. There is an  on-line script which converts html tables to pipe syntax tables.
     

The pipes must start at the beginning of a new line, except when separating parameters from content or when using || to separate cells on a single line. The parameters are optional.
     

     

     
     
 

 Tables
     
     

     
A  is defined by
{|
which generates "<table params></table>".
     

     

     
     
 

 Rows
     
     

     
For each table, an HTML <tr> tag will be generated for the first row. To start a new row, use:
     
|-
     
which generates another "<tr>".
     

Parameters can be added like this:
     
|- ''params''
     
which generates "<tr params>".
     

Note:
     

 

<tr> tags will be automatically opened at the first <td> equivalent
 
 

<tr> tags will be automatically closed at <tr> and </table> equivalents
 
     

     

     
     
 

 Cells
     
     

     
Cells are generated either like this:
     
|cell1
|cell2
|cell3
     
or like this:
     
|cell1||cell2||cell3
     
which both generate "<td>cell1</td><td>cell2</td><td>cell3</td>". The "||" equals "newline"   "|".
     

Parameters in cells can be used like this:
     
|''params''|cell1||''params''|cell2||''params''|cell3
     
which will result in
     
<td ''params''>cell1</td>
<td ''params''>cell2</td>
<td ''params''>cell3</td>
     
     

     

     
     
 

 Headers
     
     

     
Produces a TH, functioning the same way as TD, but with different style. "!" is used instead of the opening "|". "!!" can be used instead of "||". Parameters still use "|", though.  Example:
     
|}''params''|cell1
     
     

     

     
     
 

 Captions
     
     

     
A  tag is created by
     
|  Caption
     
which generates the HTML
     

You can also use parameters:
     
|  ''params''|Caption
     
which will generate
     

     

     
     
 

 Summaries
     
     

     
 
A summary is produced by adding a summary attribute after the start of the table. It can be used by  to give visually impaired readers the overall gist of the table, without having to listen to the entire table. For example:
     
     
     
produces:
     
     

     

     
     
 

 Table cell templates
     
     

     
     
provide a set of templates to configure text and color in cells in a standard way, using phrases such as ''Yes,'' ''No'' or ''n/a.''
     
     

     

     
     
 

 Square monitors
     
     

     
To format for a square monitor or window, use a tape measure. Determine the height of your rectangular screen. Using that figure measure under the screen to determine the width your monitor’s screen would be if it were square. Mark that location using ink or tape under the screen. Drag the side of your browser’s window to that location so the window is square based on accurate measurements. Square monitors and reading windows are not able to contain tables and galleries made for rectangular and wide screens. When a table or gallery is wider than the monitor, it makes every line of text wider than the screen as well. The px amounts of the following gallery were determined after measuring the window to make sure it was square:
     

Type this:
     

     
     
     

     

     

     

     
     

For this:
     

     

     

     

     

     

     

     
     
 

 Vertically oriented column headers
     
     

     
Sometimes it is desirable (such as in a table predominantly made of numbers) to rotate text such that it proceeds from top to bottom or bottom to top instead of from left to right or right to left. Currently, browser support for this type of styling as a component of HTML or CSS is sporadic (Internet Explorer is one of the few browsers that supports this in cascading stylesheets, albeit in a non-standard way). An alternative solution that works in most if not all browsers is to use images in place of the text. For instance, the following table uses SVG images instead of text to produce the rotated column headings:
     

     

     

Normally, one problem with this approach is that readers are directed to different pages when they click on the images. To eliminate this problem—or to direct readers to a different page—you can use the summary parameter. A column-header can be coded as follows:
     

     
|}
     
The image will wikilink to article "xxxx".
     

By setting the link to an empty string (e.g. summary), no navigation will occur when visitors click on an image. Note that it might also be a good idea to color the image text blue if you are using the images as links. Also, SVG is the preferred image format in this case because it can be re-scaled to any size without producing artifacts.
     

     

     
     
 

 Wikitable as image gallery
     
     

     
 
     

     
This section is local to Wikipedia (hard-coded here now).
     
A wikitable can be used to display side-by-side images, in the manner of an image gallery (formatted by "<gallery>"), but with larger images and less vacant area around photos.
     

A simple framed gallery can be formatted using class="wikitable" to generate the minimal thin-lines around images/photos within the table:
     

     
{| cellpadding="2"
|  Multiplication table
|-
! scope="col" | &amp;times;
! scope="col" | 1
! scope="col" | 2
! scope="col" | 3
|-
! scope="row" | 1
| 1 || 2 || 3
|-
! scope="row" | 2
| 2 || 4 || 6
|-
! scope="row" | 3
| 3 || 6 || 9
|-
! scope="row" | 4
| 4 || 8 || 12
|-
! scope="row" | 5
| 5 || 10 || 15
|}
     
     

Note the result below (with thin-lined cells):
     
 
 
Nibelungen Bridge to Worms
across the Rhine
Worms and its sister cities
Another issue about the standard "<gallery>" tag, in 2007 to 2008, was that it put 4 images per line, overrunning the right margin of a wiki article displayed in portrait-style width (like 800x600), unless the gallery had only 3 images. However, a wikitable uses typical image-links with sizes, such as 
{| class="wikitable"
|  Multiplication table
|-
! scope="col" | &amp;times;
! scope="col" | 1
! scope="col" | 2
! scope="col" | 3
|-
! scope="row" | 1
| 1 || 2 || 3
|-
! scope="row" | 2
| 2 || 4 || 6
|-
! scope="row" | 3
| 3 || 6 || 9
|-
! scope="row" | 4
| 4 || 8 || 12
|-
! scope="row" | 5
| 5 || 10 || 15
|}
Image:XXX.jpg|130px]]" so 4 images could be displayed on a wikitable line within a 600px width (for 800 × 600 resolution screens).
     

     
{| class="wikitable" style="font-style:italic; font-size:120%; border: 3px dashed red;"
|  Multiplication table
|-
! scope="col" | &amp;times;
! scope="col" | 1
! scope="col" | 2
! scope="col" | 3
|-
! scope="row" | 1
| 1 || 2 || 3
|-
! scope="row" | 2
| 2 || 4 || 6
|-
! scope="row" | 3
| 3 || 6 || 9
|-
! scope="row" | 4
| 4 || 8 || 12
|-
! scope="row" | 5
| 5 || 10 || 15
|}
     
     

     
130px]]
125px]]
125px]]
115px]]
 
Nibelungen Bridge to Worms
Worms and its sister cities
Statue of Liberty
New York City
     
Another advantage about wikitable images, compared to "<gallery>" formatting, is the ability to "square" each image when similar heights are needed, so consider putting 2-number image sizes (such as "199x95px"), where the 2nd number limits height:
     

     
''text''
     
     

Note the 3 images sized "199x95px" appear identical height, of 95px (4th image purposely smaller). The "95px" forces height, while "199x" fits the various widths (could even be "999x"):
     
199x95px]]
199x95px]]
199x95px]]
100x95px]]
 
Statue of Liberty
New York City
Star on blue
Bridge to Worms
     
Therefore, the use of size "199x95px" (or "999x95px") produces the auto-height-sizing beyond the "<gallery>" tag, and with the option to set taller thumbnails ("199x105px"), or even to have some images purposely smaller than other images of "95px" height.  A very short height ("70px") allows many more images across the table:
     

     
{| class="wikitable sortable" border="1"
|  Sortable table
|-
! scope="col" | Alphabetic
! scope="col" | Numeric
! scope="col" | Date
! scope="col" class="unsortable" | Unsortable
|-
| d || 20 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}
     
The above wikitable-coding produces the result below, of 6 columns:
     
 
199x70px]]
199x70px]]
199x70px]]
199x70px]]
199x70px]]
199x70px]]
     
     

Once images have been placed in a wikitable, control of formatting can be adjusted when more images are added.
     

     

     
     
 

 Shifting/centering
     
     

     
Images within a wikitable can be shifted by inserting non-breaking spaces ("&nbsp;") before or after the image-link ("&nbsp;[Image:]").  However, auto-centering simply requires use of center-tags to be placed around an image-link for centering in a cell 
{| class="wikitable sortable collapsible" border="1"
|  Sortable and collapsible table
|-
! scope="col" | Alphabetic
! scope="col" | Numeric
! scope="col" | Date
! scope="col" class="unsortable" | Unsortable
|-
| d || 20 || 2008-11-24 || This
|-
| b || 8 || 2004-03-01 || column
|-
| a || 6 || 1979-07-23 || cannot
|-
| c || 4.2 || 1492-12-08 || be
|-
| e || 0 || 1601-08-13 || sorted.
|}
.
     

In the example below, note how Col2 uses <center>, but Col3 uses "&nbsp;":
     
|-
     
The above coding generates the table below: note the middle garden image is centered (but not the left image), and the right image has 2 spaces before "  View...":
     
 
  
Dom tower from Brigittenstraat
Cloister garth of the Utrecht Dom Church
  View from bell tower
Also note that the tag "<small>" made a smaller text-size caption. However, fonts also can be sized by percent (style="font-size: 87%;"), where the actual percent-size as displayed depends on the various sizes allowed for a particular font.
     
     
| style="font-size: 87%;" | View from bell tower
     
     
The column attribute, above, uses "style=" to set the font-size for the caption, following the 2nd vertical-bar "|".
     

A font-size: 65% is very small, while style="font-size: 87%;" is a mid-size font, larger than the tag small.
     

     

     
     
 

 Generate a chart with a table
     
     

     
 
Using  or another template that uses .
     

     

     
     
 

 Converting spreadsheet to wikitable format
     
     

     
To convert from spreadsheets such as Gnumeric, MS Excel or OpenOffice.org Calc, you can use the  Copy & Paste Excel-to-Wiki converter.
     

      csv2wp – converts  (CSV) format to pipe syntax. You may use this to import tables from Excel etc. (more information)
     

     

     
     
 

 Tables and WYSIWYG
     
     

     
Due to the complexity of wikimarkup (especially tables), a common question is if there is any visual editor to make creating and modifying tables easier. Unfortunately at the moment no such editor exists, however it is possible to create a table with a HTML editor (like Adobe Dreamweaver) and then copy the html code generated by this into the page.
     

It is possible in the future that a WYSIWYG editor will be adopted (there has been much discussion about this in the past, however there are many technical hurdles that need to be solved). For the more technically inclined/adventurous tools such as  exist, however they do not incorporate the complete WYSIWYG experience and currently do not support tables (although they may do so in the future).
     

     

     
     
 

 See also
     
     

     
     

 

     Wikitable
 
 

     Manual of Style/Tables
 
 

     How to make a table in Wikipedia
 
 

 
 

 
 

 
 

 
 

     Sorting
 
 

 
 

     Dcljr/Tables
 
 

 
 

 
 

 
 

Examples:
 
 

  

  
  

  
  

  
 
 

 
 

 
 

Cleanup template  and its category Articles requiring tables
 
     

     

     
     
 

 External links
     
     

     
     

 

     Wikipedia:Helferlein/VBA-Macro for EXCEL tableconversion published in German-Wikipediaproject (English instructions included)
 
 

      HTML tables to wiki converter at cnic.org
 
 

      HTML tables to wiki converter at uni-bonn.de
 
 

      HTML tables to wiki converter at diberri.dyndns.org
 
 

      pywikipediabot (can convert HTML tables to wiki)
 
 

      HTML-WikiConverter Various versions and languages
 
 

      Making Wiki Tables with good examples
 
 

      Wiki and HTML Tables Ready to Use: A selection of tables and their Wiki/HTML code
 
 

      Table of CSS color names and HEX codes
 
     

 
 
 
Categories: Wikipedia How-to, Wikipedia Text Help