wiki

Help:Table

Revision as of 07:51, 31 May 2018 by Sabrina.rowland-cote (talk | contribs)


GCpedia Help


Get help
Contact GCpedia admin
admin.GCpedia@tbs-sct.gc.ca

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

Retrieved from "https://wiki.gccollab.ca/index.php?title=Help:Table&oldid=2579"