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.

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:

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.

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 &nbsp; 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.

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

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.

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):

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:

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:

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.