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: 

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:

which is probably not what you want:

However, the format modifier is useful:

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 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.

Optional parameters can modify the behavior of cells, rows, or the entire table. For instance, a border could be added to the table:

The final table would display like this:



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 &lt;nowiki>|&lt;/nowiki> or &amp;#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:

What it looks like in your browser: 

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.



and what it looks like in your browser:



Color
The way of specifying color of text and background for a single cell are as follows.

The wiki markup code: 

What it looks like in your browser: 

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: <pre style="display: inline-block;">

What it looks like in your browser: <div style="background: white; border: 1px solid rgb(153, 153, 153); padding: 1em;">

To make the table blend in with the background, use  or.

To force a cell to match one of the default colors of the, use   for the darker header, and   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: <pre style="display: inline-block;">

What it looks like in your browser: <div style="background: white; border: 1px solid rgb(153, 153, 153); padding: 1em;">

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: <pre style="display: inline-block;">

To set column widths in a table without headers, specify the width in the first cell for each column, like this:

<pre style="display: inline-block;">

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 (<tt>style="border: 1px solid darkgray"</tt>), as in the following (Note: if you intend to use the 'cellpadding' or 'cellspacing' options along with a border, you MUST use this format):

<pre style="display: inline-block;">

Note the bottom-row texts are centered by <tt>style="text-align: center;"</tt> while star-images were not centered.

As long as the files omit the parameter "thumb" they will not show borders. The border color "darkgray" matches that seen using <tt>class="wikitable"</tt> above; however, it could be any color name (such as <tt>style="border: 1px solid darkgreen;"</tt>) 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:

<pre style="display: inline-block;">

Note only the image cells, here, have individual borders, not the text.

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:

To fix this, apply <tt>style="vertical-align: top;"</tt> to the rows (unfortunately it is necessary to apply this individually to every single row). For example: <pre style="display: inline-block;">

Floating table
The wiki markup coding: <pre style="display: inline-block;"> This paragraph is before the table. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod...

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: <div style="background: white; border: 1px solid rgb(153, 153, 153); padding: 1em;">

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

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 <tt> {| style="margin: 1em auto 1em auto;" </tt>

Wiki markup <pre style="display: inline-block;">

What it looks like in your browser

Collapsible tables
You can create a table that will collapse and be hidden. Add <tt>class="collapsible"</tt> 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:

<pre style="display: inline-block;">

Gives:

Sortable tables
Tables can be made sortable by adding <tt>class="sortable"</tt>. 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 <div style="background: white; border: 1px solid rgb(153, 153, 153); padding: 1em;">

What it looks like in your browser <div style="background: white; border: 1px solid rgb(153, 153, 153); padding: 1em;">