Help:Tables

Wikibooks Help

About Wikibooks
FAQs
Glossary

Navigating

Pages
Tracking changes
Account management

Contributing

Editing
Categories
Files
Tables
Templates
Variables
Formulas
Quizzes
Styling
Collections
Importing

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

Vector 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

Wiki Table Markup {| table start  |+ table caption, optional; only between table start and first table row  |- table row, optional on first row -- wiki engine assumes the first row  ! table header cell, optional. Consecutive table header cells may be added on same line separated by double marks (!!) or start on new lines, each with its own single mark (!).  | table data cell, required! Consecutive table data cells may be added on same line separated by double marks (||) or start on new lines, each with its own single mark (|).  |} table end The above marks must start on a new line except the double || and !! for optionally adding consecutive cells to a line.

Comparison of table markup WIKI XHTML {| [attr] <table [attr]>  |+ caption <caption>caption</caption>  |+ [attr] | caption <caption [attr]>caption</caption>  |- [attr] <tr [attr]></tr>  ! header <th>header</th>  ! attr | header <th [attr]>header</th>  ! header !! header <th>header</th> <th>header</th>  ! [attr] | header !! header <th [attr]>header</th> <th [attr]>header</th>  | data cell <td>data cell</td>  | [attr] | data cell <td [attr]>data cell</td>  | data || data <td>data</td> <td>data</td>  | [attr] | data || data <td [attr]>data</td> <td [attr]>data</td>  |} </table>

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:

The table's caption

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 &#124;.

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:

Multiplication table

×	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

Cells left-aligned, table centered

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

Sortable table

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.