Help:Table

A wikitable, like all tables, is an arrangement of rows and columns used to organize and position information.

Wiki table markup summary

The following wiki markup codes are the building blocks used to create a wikitable. The markups must be used at the beginning of a line.

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

Creating a wikitable

To add a basic table to your page which you can then edit to customize, click on the http://www.gcpedia.gc.ca/gcwiki/skins/common/buttons/Button_array.png (insert table) button on the toolbar, or copy and paste this code {{subst:Table}} to your page, and save it.

Insert table (button)

Clicking on the insert table button in the toolbar will insert the following text and create a table like this:

{| class='wikitable' border='1' 
|- 
!header1 
!header2 
|-  
| row 1, cell 1
| row 1, cell 2
|-
| row 2, cell 1
| row 2, cell 2
|}

header1	header2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

{{Subst:table}}

Using {{subst:Table}} will copy the text from a {{table}} template like this, and appear as a table below:

{| class="prettytable"
|+ Title of the table
|-
|
! scope="col" | Column label 1
! scope="col" | Column label 2
! scope="col" | Column label 3
|-
! scope="row" | Row label 1
| Column 1, row 1 
| Column 2, row 1
| Column 3, row 1
|-
! scope="row" | Row label 2
| Column 1, row 2 
| Column 2, row 2
| Column 3, row 2
|-
! scope="row" | Row label 3
| Column 1, row 3 
| Column 2, row 3
| Column 3, row 3
|}

Title of the table

	Column label 1	Column label 2	Column label 3
Row label 1	Column 1, row 1	Column 2, row 1	Column 3, row 1
Row label 2	Column 1, row 2	Column 2, row 2	Column 3, row 2
Row label 3	Column 1, row 3	Column 2, row 3	Column 3, row 3

Accessibility

There are four key elements to help ensure that a table is accessible for screen readers and other web browsing tools.

1. Correct table captions
   • Caption ( |+ ): A caption is a table's title, describing its nature.
2. Correct headers structure
   • Row & column headers ( ! ): Like the caption, these help present the information in a logical structure to visitors. The headers help screen readers render header information about data cells. For example, header information is spoken prior to the cell data, or header information is provided on request.
   • Scope of headers ( ! scope="col" | and ! scope="row" | ): This clearly identifies headers as either row headers or column headers. Headers can now be associated to corresponding cells.
   • Header columns in the middle of a table should be avoided, instead, split the table in several sub-tables with explanatory sub-headings.
3. Images and colour
   • Colors inside a table should meet the requirements for colour accessibility. Colour contrast – measured by the free Colour Contrast Analyzer – needs to be sufficient. Also, information should not be conveyed by colour alone. Information should also be available textually.
4. Avoiding nested tables
   • Nested tables are confusing to screen readers and should be avoided.

Formatting

Table Level The table should be started on a new line with {| param and end with |}. In place of "param" you have the option of entering parameters that affect the look of the table, which are listed below.

Name	Function	Values
align	horizontal text alignment	left, right, center
border	border thickness	number
width	width	number
cellpadding	internal cell spacing	number
cellspacing	external cell spacing	number

Row Level The first row is automatically created with the {| at the beginning of the table and subsequent rows are created with |- param. The optional parameters at the row level are in the table below.

Name	Function
align	horizontal text alignment
valign	vertical alignment

Cell Level There are two options for creating cells. By either two pipes next to each other: | param || cell1 || param | cell2 || param | cell3

Or by using one pipe symbol on a new line:
| param | cell1
| param | cell2
| param | cell3

There are optional parameters at the cell level which are in the table below:

Name	Function
align	horizontal text alignment
colspan	several adjacent cells in a column are merged
rowspan	several adjacent cells in a row are merged

topleft	topmiddle	topright
midleft	midmiddle	midright
bottomleft	bottommiddle	bottomright

topleft	topmiddle	topright
midleft	midmiddle	midright
bottomleft	bottommiddle	bottomright

Other Tips
To make column headings in bold, you have the option of using exclamation marks instead of the pipe symbol at the beginning of the row, and double exclamation marks between each cell instead of double pipe symbols.
Example: ! Name !! Function !! Values

Sortable tables

To make a sortable table (so you can sort contents by date, number, or alphabetically), assign your table the class 'wikitable sortable' in the first line of code and use exclamation marks for the table headings instead of the pipe symbol. Then, use the pipe symbol for information/values listed in the body of the table.
Example:
{| class="wikitable sortable"
|-
!A column
!B column
|-
|info in A column
|-
|info in B column
|}

Collapsible tables

Collapsible tables can be made using the following basic code:
{| class="wikitable collapsible"
!A column heading
!B column heading
|-
| A column content
| B column content
|}

For more fancy variations on collapsible tables, see the Wikipedia help page.

Floating tables

To make a table float beside your text, instead of sitting above or below it, you can follow the example below:

Note that text you put before (above) the table's coding will show up above the table; text you put below (after) the coding for table will show up beside the floating table.

A column	B column	C column
more stuff	more stuff	even more stuff
other things	even more things	look at all these things

This text is beside the table. Note the floating-table to the right.
Here is more text to put beside the table. Look at that table float. Float, table, float.

Keep on floating.

Coding for the above example:

{| style="float: right;" border="1"

! A column

! B column

! C column

|-

| more stuff

| more stuff

| even more stuff

|-

| other things

| even more things

| look at all these things

|}

This text is beside the table. Note the floating-table to the right.

Here is more text to put beside the table. Look at that table float. Float, table, float.

Keep on floating.

External links

• For basic use of a wikitable, see Wikipedia:Help:Wikitable
• For more extensive help with tables, see Wikipedia:Help:Table
• Wikipedia:Manual of Style (tables)