Tables

PmWiki has two types of table markup; the markup described in this page is useful for creating simple tables with lots of small cells, while table directive markup helps with larger scale or more complex tables. For more possibilities with formatting simple tables, see Cookbook:Rowspan in simple tables and Cookbook:Formatting tables.

Table basics

Simple tables are created via use of double pipe characters: ||. Lines beginning with this markup denote rows in a table or a formatting line. Within table row lines the double-pipe is used to delimit cells. In the examples below a border is added for illustration (the default is no border).

The first line in the markup (initial double bars "||") is required. After the double bars, there may be optional formatting commands for the table such as border or width.

|| border=1
|| cell 1 || cell 2 || cell 3 ||
|| cell 1 || cell 2 ||

Header cells can be created by placing ! as the first character of a cell. Note that these are table headers, not headings, so it doesn't extend to !!, !!!, etc.

|| border=1
||! cell 1 ||! cell 2 ||! cell 3 ||
|| cell 1  ||  cell 2 ||  cell 3 ||

A table can have a caption, indicated by ||!caption!||. Any caption must appear prior to other rows of the table.

|| border=1
||! A special table !||
||! cell 1 ||! cell 2 ||! cell 3 ||
|| cell 1  ||  cell 2 ||  cell 3 ||

Formatting cell contents

Cell contents may be aligned left, centered, or aligned right.

• To left-align contents, place the cell contents next to the leading ||.
• To center contents, add a space before and after the cell contents.
• To right-align contents, place a space before the cell contents and leave the cell contents next to the trailing ||.

|| border=1 width=100%
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||

|| border=1 width=100%
||!cell default||!cell left ||
||default-aligned||left-aligned ||

Note that header and detail cells have different default alignments.

To get a cell to span multiple columns, follow the cell with empty cells. (At present there is no markup for spanning rows.)

|| border=1 width=100%
|| |||| right column ||
|| || right two columns ||||
|| || middle column || ||
|| left column || ||||
|| left two columns |||| ||
|| entire row ||||||
|| left column || middle column || right column ||

Table attributes

Any line that begins with || but doesn't have a closing || sets the table attributes for any tables that follow. These attributes can control the size and position of the table, borders, background color, and cell spacing. (In fact these are just standard HTML attributes that are placed in the <table> tag.)

Use the width= attribute to set a table's width, using either a percentage value, an absolute size, or *.

See also $SimpleTableDefaultClassName.

|| border=1 width=100% 
|| cell 1 || cell 2 || cell 3 ||
|| c1 || cellcellcellcell2 || cell 3 ||

The border= attribute sets the size of a table's borders.

|| border=10 width=70%
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||

|| border=0 width=70%
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||

Use align=center, align=left, and align=right to center, left, or right align a table. Note that align=left and align=right create a floating table, such that text wraps around the table.

|| border=1 align=center width=50%
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||
Notice how text does not wrap with a table using "align=center".

|| border=1 align=left width=50%
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||
Notice how text wraps to the right of a table using "align=left".

|| border=1 align=right width=50%
||!cell 1      ||! cell 2  ||!       cell 3||
||left-aligned || centered || right-aligned||
Notice how text wraps to the left of a table using "align=right".

Note: to get a table to align left (but not "float left") requires CSS, as in

The bgcolor= attribute sets the background color for a table. At present there is no way to specify the color of individual rows or cells in this type of table (but see Cookbook:FormattingTables).

|| border=1 align=center bgcolor=yellow width=70%
||!cell 1    ||! cell 2 ||!     cell 3||
||left-align || center  || right-align||

Sortable tables

To allow readers to reorder a table, give it the class="sortable" attribute:

|| class="sortable simpletable"
||!   m||!Geographic zone     ||!Highest point     ||!Country  ||
|| 3700||Arctic               ||Gunnbjørn Fjeld    ||Greenland ||
|| 8848||North Temperate Zone ||Mount Everest      ||Nepal     ||
|| 5790||North Tropical Zone  ||Cayambe            ||Ecuador   ||
|| 6768||South Tropical Zone  ||Huáscarán          ||Peru      ||
|| 6960||South Temperate Zone ||Aconcagua          ||Argentina ||
|| 4892||Antarctic            ||Mount Vinson       ||(none)    ||

Note: this feature has to be enabled in local configuration, see $EnableSortable.

FAQ

|| border=1 rules=rows frame=hsides
|| cell 1 || cell 2 || cell 3 ||
|| cell 1 || cell 2 || cell 3 ||

|| border=1 rules=cols frame=vsides
||! cell 1 ||! cell 2 ||! cell 3 ||
|| cell 1  ||  cell 2 ||  cell 3 ||

||border="1" style="border-collapse:collapse" cellpadding="5" width=66%
||!Header ||! Header || '''Header'''||
||cells   ||  with   ||      padding||
||        ||         ||             ||

table.column td.col1 { width: 120px; }
table.column td.col3 { width: 40px; }