Help:Tables
A table is an arrangement of columns and rows used to organize and position data. Tables are useful for this purpose and there are many different styles and tricks that can be used to customize each. This page gives you information about syntax to build tables in Wikibooks.
Using the toolbar
To automatically insert a table, click 
on the edit toolbar.
The following text is inserted when the button is clicked and the default values are accepted:
{| class="wikitable"
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}
| Header text | Header text | Header text |
|---|---|---|
| Example | Example | Example |
| Example | Example | Example |
| Example | Example | Example |
The sample text ("Header text" or "Example") is to be replaced with actual data. The number of columns and rows can be customized when working with the initial dialog box that appears after clicking the "insert table" button.
Syntax tutorial
|
| ||||||||||||||||||||||||||||||||||||||||||
If you use single bars, then what might appear to be the first cell is in fact a format modifier applied to the cell, and the rest of your "cells" will be merged into one:
{| style="border:1px;"
|-
|format modifier (not displayed) |These all |(including the pipes) |go into |the first cell
|}
which is probably not what you want:
| These all |(including the pipes)|go into |the first cell |
However, the format modifier is useful:
{| style="border:1px;"
|-
| Cell 1 (no modifier—not aligned)
|-
| style="text-align: right;" | Cell 2 (right aligned)
|}
| Cell 1 (no modifier — not aligned) |
| Cell 2 (right aligned) |
Just remember: no more than 2 single pipes on a line!
A row of column headings is identified by using "! scope="col" |" instead of "|", and using "!! scope="col" |" instead of "||". Header cells typically render differently from regular cells, depending on the browser. They are often rendered in a bold font and centered.
{|
|+ 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 first cell of a row is identified as a row heading by starting the line with "! scope="row" |" instead of "|", and starting subsequent data cells on a new line.
{|
|+ 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
|}
Optional parameters can modify the behavior of cells, rows, or the entire table. For instance, a border could be added to the table:
{| 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 final table would display like this:
| Column heading 1 | Column heading 2 | Column heading 3 |
|---|---|---|
| Row heading 1 | Cell 2 | Cell 3 |
| Row heading A | Cell B | Cell C |
Each row must have the same number of cells as the other rows, so that the number of columns in the table remains consistent. For empty cells, use the non-breaking space as content to ensure that the cells are displayed. To show a visible pipe in a cell, use <nowiki>|</nowiki> or |.
Simple example
Both of these generate the same output. Choose a style based on the number of cells in each row and the total text inside each cell.
The wiki markup code:
{|
| A
| B
|-
| C
| D
|}
{|
| A || B
|-
| C || D
|}
What it looks like in your browser:
| A | B |
| C | D |
Standard formatting
You can add class="wikitable" next to the {| at the start of your table to have the standard formatting applied that applies a background color to table headings and adds borders between cells and around the table.
{| class="wikitable" style="text-align: center; width: 200px; height: 200px;"
|+ Multiplication table
|-
! scope="col" | ×
! 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
|}
and what it looks like in your browser:
| × | 1 | 2 | 3 |
|---|---|---|---|
| 1 | 1 | 2 | 3 |
| 2 | 2 | 4 | 6 |
| 3 | 3 | 6 | 9 |
| 4 | 4 | 8 | 12 |
| 5 | 5 | 10 | 15 |
Color
The way of specifying color of text and background for a single cell are as follows.
The wiki markup code:
{|
| style="background: red; color: white" | abc
| def
| style="background: red; color: white" | ghi
| jkl
|}
What it looks like in your browser:
| abc | def | ghi | jkl |
Like other parameters, colors can also be specified for a whole row or the whole table; parameters for a row override the value for the table, and those for a cell override those for a row. (Note that there is no easy way to specify a color for a whole column—each cell in the column must be individually specified.):
The wiki markup code:
{| style="background: yellow; color: green"
|-
| abc || def || ghi
|- style="background: red; color: white"
| jkl || mno || pqr
|-
| stu || style="background: silver" | vwx || yz
|}
What it looks like in your browser:
| abc | def | ghi |
| jkl | mno | pqr |
| stu | vwx | yz |
To make the table blend in with the background, use style="background: none;" or style="background: transparent;".
To force a cell to match one of the default colors of the class="wikitable", use style="background: #f2f2f2" for the darker header, and style="background: #f9f9f9" for the lighter body.
Width, height
The width and height of the whole table can be specified, as well as the height of a row. To specify the width of a column one can specify the width of an arbitrary cell in it. If the width is not specified for all columns, and/or the height is not specified for all rows, then there is some ambiguity, and the result depends on the browser.
The wiki markup code:
{| style="width: 75%; height: 200px;" class="wikitable"
|-
| abc || def || ghi
|- style="height:100px;"
| jkl || style="width:200px;" | mno || pqr
|-
| stu || vwx || yz
|}
What it looks like in your browser:
| abc | def | ghi |
| jkl | mno | pqr |
| stu | vwx | yz |
Setting column widths
To force column widths to specific requirements, rather than accepting the width of the widest text element in a column's cells, follow this example. Note that wrap-around of text is forced.
The wiki markup code:
{| class="wikitable"
! scope="col" style="width:50px;" | Name
! scope="col" style="width:225px;" | Effect
! scope="col" style="width:225px;" | Games Found In
|-
| Poké Ball || Regular Poké Ball || All Versions
|-
| Great Ball || Better than a Poké Ball || All Versions
|}
| Name | Effect | Games Found In |
|---|---|---|
| Poké Ball | Regular Poké Ball | All Versions |
| Great Ball | Better than a Poké Ball | All Versions |
To set column widths in a table without headers, specify the width in the first cell for each column, like this:
{| class="wikitable"
|-
| style="width:100px;" | This column is 100 pixels wide
| style="width:200px;" | This column is 200 pixels wide
| style="width:300px;" | This column is 300 pixels wide
|-
| blah || blih || bluh
|}
| This column is 100 pixels wide | This column is 200 pixels wide | This column is 300 pixels wide |
| blah | blih | bluh |
Setting borders
Table borders default to a complex shaded double-line (the default in HTML); however, those borders can be set to a thin solid line by using a style-parameter (style="border: 1px solid darkgray"), as in the following (Note: if you intend to use the 'cellpadding' or 'cellspacing' options along with a border, you MUST use this format):
{| cellpadding="2" style="border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Middle
! style="width: 130px;" | Right
|- style="border:none;"
| [[File:StarIconBronze.png|120px]]
| [[File:StarIconGold.png|120px|Caption when mouse-over image]]
| [[File:StarIconGreen.png|120px|Green stellar icon]]
|- style="text-align:center;"
| Bronze star || Gold star || Green star
|}
Note the bottom-row texts are centered by style="text-align: center;" while star-images were not centered.
| Left | Middle | Right |
|---|---|---|
|
|
|
| Bronze star | Gold star | Green star |
As long as the files omit the parameter "thumb" they will not show borders. The border color "darkgray" matches that seen using class="wikitable" above; however, it could be any color name (such as style="border: 1px solid darkgreen;") or use a hex-color (such as: #DDCCBB). See Web colors for information on hex-colors, which allow you to specify any shade you like.
A column format-specifier (enclosed in "|...|") can have a style-parameter to set borders on each cell, as follows:
{| cellpadding="2" style="border: 1px solid darkgray;"
! style="width: 140px;" | Left
! style="width: 150px;" | Middle
! style="width: 130px;"| Right
|- style="text-align: center;"
| style="border: 1px solid blue;"|
[[File:StarIconBronze.png|120px]]
| style="border: 1px solid #777777;"|
[[File:StarIconGold.png|120px|Caption when mouse-over image]]
| style="border: 1px solid #22AA55;"|
[[File:StarIconGreen.png|120px|Green stellar icon]]
|- style="text-align: center;"
|Bronze star || Gold star || Green star
|}
Note only the image cells, here, have individual borders, not the text.
| Left | Middle | Right |
|---|---|---|
|
|
|
|
| Bronze star | Gold star | Green star |
The lower hex-colors (such as: #616161) are closer to black. Typically, all borders in a table would be one specific color.
Vertical alignment
By default data in tables is vertically aligned to the middle of the cell, which results in layouts like this:
| Row heading | A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | short text |
|---|
To fix this, apply style="vertical-align: top;" to the rows (unfortunately it is necessary to apply this individually to every single row). For example:
{| class="wikitable" style="width: 400px;"
|- style="vertical-align: top;"
! scope="row" style="width: 10%;" | Row heading
| style="width: 70%;" | A longer piece of text. Lorem ipsum...
| style="width: 20%;" | short text
|- style="vertical-align: top"
! scope="row" | Row heading
| Excepteur sint occaecat...
| short text
|}
| Row heading | A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | short text |
|---|
Floating table
The wiki markup coding:
This paragraph is before the table. Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod...
{| style="float: right;" class="wikitable"
| Col 1, row 1
| rowspan="2" | 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 <tt>"rowspan=2"</tt> so there
is no coding for "Col 2" in the 2nd row, just: Col 1 & Col 3.
What it looks like in your browser:
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.
Centering tables
Centered tables can be achieved, but they will not "float"; that is to say, no text will appear to either side. The trick is {| style="margin: 1em auto 1em auto;"
Wiki markup
{| class="wikitable" style="margin: 1em auto 1em auto;"
|+ '''Cells left-aligned, table centered'''
! scope="col" | Duis
! scope="col" | aute
! scope="col" | irure
|-
| dolor || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}
What it looks like in your browser
| Duis | aute | irure |
|---|---|---|
| dolor | in reprehenderit | in voluptate velit |
| esse cillum dolore | eu fugiat nulla | pariatur. |
Collapsible tables
You can create a table that will collapse and be hidden. Add class="collapsible" to the top of a table or add "collapsible" after "wikitable" to enable collapsing behavior. By default, a collapsible table will begin collapsed. To change this, include the additional class 'selected'. You must include a header row, where the control to expand and collapse will be displayed. Example:
{| class="wikitable collapsible selected"
! Header
|-
| Content which starts shown
|-
| Click the header row to collapse
|}
Gives:
| Header |
|---|
| Content which starts shown |
| Click the header row to collapse |
Sortable tables
Tables can be made sortable by adding class="sortable". 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." in front of a number-it will sort like zero. Do not put text after the number, and do not put a range of numbers. Instead, put these texts in a separate column.
A long form of abbreviated content can be put as legend outside the table.
Wiki markup
{| class="wikitable sortable"
|+ 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.
|}
What it looks like in your browser
| Alphabetic | Numeric | Date | 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. |