512
edits
Changes
Jump to navigation
Jump to search
m
1 revision imported: Resources from GCPedia
{{GC2.0 Tools Help gcp}}
{{TOCleft}}
{{Help TOC|star=1}}
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.
{| class="wikitable" cellpadding="5" cellspacing="0" border="1" width="60%"
|
<nowiki>{|</nowiki>
| '''table start'''
|-
|
<nowiki>|+</nowiki>
| table '''caption,''' ''optional;'' only between '''table start''' and first '''table row'''
|-
|
<nowiki>|-</nowiki>
| '''table row,''' ''optional on first row'' -- wiki engine assumes the first row
|-
|
<nowiki>!</nowiki>
| '''table header''' cell, ''optional.'' Consecutive '''table header''' cells may be added on same line separated by double marks (<code>!!</code>) or start on new lines, each with its own single mark (<code>!</code>).
|-
|
<nowiki>|</nowiki>
| '''table data''' cell, ''required!'' Consecutive '''table data''' cells may be added on same line separated by double marks (<code><nowiki>||</nowiki></code>) or start on new lines, each with its own single mark (<code><nowiki>|</nowiki></code>).
|-
|
<nowiki>|}</nowiki>
| '''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 <code><nowiki>{{subst:Table}}</nowiki></code> 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:
<pre>{| class='wikitable' border='1'
|-
!header1
!header2
|-
| row 1, cell 1
| row 1, cell 2
|-
| row 2, cell 1
| row 2, cell 2
|}</pre>
{| class='wikitable' border='1'
|-
!header1
!header2
|-
| row 1, cell 1
| row 1, cell 2
|-
| row 2, cell 1
| row 2, cell 2
|}
=== {{Subst:table}} ===
Using <code><nowiki>{{subst:Table}}</nowiki></code> will copy the text from a {{tl|table}} [[Help:Templates|template]] like this, and appear as a table below:
<pre>
{| 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
|}</pre>
{| 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
|}
== Accessibility ==
There are four key elements to help ensure that a table is accessible for screen readers and other web browsing tools.
#Correct table captions
#*Caption ( <code>|+</code> ): A caption is a table's title, describing its nature.
#Correct headers structure
#*Row & column headers (<code> ! </code>): 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 (<code> ! scope="col" | and ! scope="row" | </code>): 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.
#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.
#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 <tt><nowiki>{| param </nowiki></tt> and end with <tt><nowiki>|}</nowiki></tt>. In place of "param" you have the option of entering parameters that affect the look of the table, which are listed below.
{| border="1" cellpadding="2"
| '''Name''' || '''Function''' || '''Values'''
|-
| <tt>align</tt> || horizontal text alignment || left, right, center
|-
| <tt>border</tt> || border thickness || number
|-
| <tt>width</tt> || width || number
|-
| <tt>cellpadding</tt> || internal cell spacing || number
|-
| <tt>cellspacing</tt> || external cell spacing || number
|}
'''''Row Level'''''
The first row is automatically created with the <tt><nowiki>{|</nowiki></tt> at the beginning of the table and subsequent rows are created with <tt><nowiki>|- param</nowiki></tt>. The optional parameters at the row level are in the table below.
{| border="1" cellpadding="2"
| '''Name''' || '''Function'''
|-
| <tt>align</tt> || horizontal text alignment
|-
| <tt>valign</tt> || vertical alignment
|}
'''''Cell Level'''''
There are two options for creating cells. By either two pipes next to each other:
<tt>| param || cell1 || param | cell2 || param | cell3</tt>
Or by using one pipe symbol on a new line:<br>
<tt><nowiki>| param | cell1</nowiki><br>
<nowiki>| param | cell2</nowiki><br>
<nowiki>| param | cell3</nowiki></tt><br>
There are optional parameters at the cell level which are in the table below:
{|border="1" cellpadding="2"
| '''Name''' || '''Function'''
|-
| <tt>align</tt> || horizontal text alignment
|-
| <tt>colspan</tt> || several adjacent cells in a column are merged
|-
| <tt>rowspan</tt> || several adjacent cells in a row are merged
|}
{| border=2
|- bgcolor=green
| topleft || topmiddle || topright
|-
| midleft || midmiddle || midright
|-
| bottomleft || bottommiddle || bottomright
|}
{|cellpadding="25" cellspacing="10" border="1"
|- bgcolor=red
| align=left | topleft || align=middle | topmiddle || align=right | topright
|-
| align=left | midleft || align=middle | midmiddle || align=right | midright
|-
| align=left | bottomleft || align=middle | bottommiddle || align=right | bottomright
|- valign="top"
|}
'''Other Tips'''<br>
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.<br>
Example:
<nowiki>! Name !! Function !! Values</nowiki>
<br><br>
===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.<br>
Example:<br>
<nowiki>{| class="wikitable sortable"</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>!A column</nowiki><br>
<nowiki>!B column</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>|info in A column</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>|info in B column</nowiki><br>
<nowiki>|}</nowiki>
<br><br>
===Collapsible tables===
Collapsible tables can be made using the following basic code:<br>
<nowiki>{| class="wikitable collapsible"</nowiki><br>
<nowiki>!A column heading</nowiki><br>
<nowiki>!B column heading</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>| A column content</nowiki><br>
<nowiki>| B column content</nowiki><br>
<nowiki>|}</nowiki>
<br><br>
For more fancy variations on collapsible tables, see the [http://en.wikipedia.org/wiki/Help:Collapsing Wikipedia help page.]
<br><br>
===Floating tables===
To make a table float beside your text, instead of sitting above or below it, you can follow the example below:<br><br>
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.
{| 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.<br>
Here is more text to put beside the table. Look at that table float. Float, table, float.
Keep on floating.<br><br>
''Coding for the above example:''<br>
:<nowiki>{| style="float: right;" border="1"</nowiki><br>
:<nowiki>! A column</nowiki><br>
:<nowiki>! B column</nowiki><br>
:<nowiki>! C column</nowiki><br>
:<nowiki>|-</nowiki><br>
:<nowiki>| more stuff</nowiki>
:<nowiki>| more stuff</nowiki>
:<nowiki>| even more stuff</nowiki>
:<nowiki>|-</nowiki><br>
:<nowiki>| other things</nowiki><br>
:<nowiki>| even more things</nowiki><br>
:<nowiki>| look at all these things</nowiki><br>
:<nowiki>|}</nowiki><br>
:This text is beside the table. Note the floating-table to the right.<br>
: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]]
* [http://en.wikipedia.org/wiki/Wikipedia:Tables Wikipedia:Manual of Style (tables)]
[[Category: GCPEDIA Help|T]]
[[Fr:Aide:Tableaux]]
{{TOCleft}}
{{Help TOC|star=1}}
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.
{| class="wikitable" cellpadding="5" cellspacing="0" border="1" width="60%"
|
<nowiki>{|</nowiki>
| '''table start'''
|-
|
<nowiki>|+</nowiki>
| table '''caption,''' ''optional;'' only between '''table start''' and first '''table row'''
|-
|
<nowiki>|-</nowiki>
| '''table row,''' ''optional on first row'' -- wiki engine assumes the first row
|-
|
<nowiki>!</nowiki>
| '''table header''' cell, ''optional.'' Consecutive '''table header''' cells may be added on same line separated by double marks (<code>!!</code>) or start on new lines, each with its own single mark (<code>!</code>).
|-
|
<nowiki>|</nowiki>
| '''table data''' cell, ''required!'' Consecutive '''table data''' cells may be added on same line separated by double marks (<code><nowiki>||</nowiki></code>) or start on new lines, each with its own single mark (<code><nowiki>|</nowiki></code>).
|-
|
<nowiki>|}</nowiki>
| '''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 <code><nowiki>{{subst:Table}}</nowiki></code> 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:
<pre>{| class='wikitable' border='1'
|-
!header1
!header2
|-
| row 1, cell 1
| row 1, cell 2
|-
| row 2, cell 1
| row 2, cell 2
|}</pre>
{| class='wikitable' border='1'
|-
!header1
!header2
|-
| row 1, cell 1
| row 1, cell 2
|-
| row 2, cell 1
| row 2, cell 2
|}
=== {{Subst:table}} ===
Using <code><nowiki>{{subst:Table}}</nowiki></code> will copy the text from a {{tl|table}} [[Help:Templates|template]] like this, and appear as a table below:
<pre>
{| 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
|}</pre>
{| 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
|}
== Accessibility ==
There are four key elements to help ensure that a table is accessible for screen readers and other web browsing tools.
#Correct table captions
#*Caption ( <code>|+</code> ): A caption is a table's title, describing its nature.
#Correct headers structure
#*Row & column headers (<code> ! </code>): 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 (<code> ! scope="col" | and ! scope="row" | </code>): 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.
#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.
#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 <tt><nowiki>{| param </nowiki></tt> and end with <tt><nowiki>|}</nowiki></tt>. In place of "param" you have the option of entering parameters that affect the look of the table, which are listed below.
{| border="1" cellpadding="2"
| '''Name''' || '''Function''' || '''Values'''
|-
| <tt>align</tt> || horizontal text alignment || left, right, center
|-
| <tt>border</tt> || border thickness || number
|-
| <tt>width</tt> || width || number
|-
| <tt>cellpadding</tt> || internal cell spacing || number
|-
| <tt>cellspacing</tt> || external cell spacing || number
|}
'''''Row Level'''''
The first row is automatically created with the <tt><nowiki>{|</nowiki></tt> at the beginning of the table and subsequent rows are created with <tt><nowiki>|- param</nowiki></tt>. The optional parameters at the row level are in the table below.
{| border="1" cellpadding="2"
| '''Name''' || '''Function'''
|-
| <tt>align</tt> || horizontal text alignment
|-
| <tt>valign</tt> || vertical alignment
|}
'''''Cell Level'''''
There are two options for creating cells. By either two pipes next to each other:
<tt>| param || cell1 || param | cell2 || param | cell3</tt>
Or by using one pipe symbol on a new line:<br>
<tt><nowiki>| param | cell1</nowiki><br>
<nowiki>| param | cell2</nowiki><br>
<nowiki>| param | cell3</nowiki></tt><br>
There are optional parameters at the cell level which are in the table below:
{|border="1" cellpadding="2"
| '''Name''' || '''Function'''
|-
| <tt>align</tt> || horizontal text alignment
|-
| <tt>colspan</tt> || several adjacent cells in a column are merged
|-
| <tt>rowspan</tt> || several adjacent cells in a row are merged
|}
{| border=2
|- bgcolor=green
| topleft || topmiddle || topright
|-
| midleft || midmiddle || midright
|-
| bottomleft || bottommiddle || bottomright
|}
{|cellpadding="25" cellspacing="10" border="1"
|- bgcolor=red
| align=left | topleft || align=middle | topmiddle || align=right | topright
|-
| align=left | midleft || align=middle | midmiddle || align=right | midright
|-
| align=left | bottomleft || align=middle | bottommiddle || align=right | bottomright
|- valign="top"
|}
'''Other Tips'''<br>
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.<br>
Example:
<nowiki>! Name !! Function !! Values</nowiki>
<br><br>
===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.<br>
Example:<br>
<nowiki>{| class="wikitable sortable"</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>!A column</nowiki><br>
<nowiki>!B column</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>|info in A column</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>|info in B column</nowiki><br>
<nowiki>|}</nowiki>
<br><br>
===Collapsible tables===
Collapsible tables can be made using the following basic code:<br>
<nowiki>{| class="wikitable collapsible"</nowiki><br>
<nowiki>!A column heading</nowiki><br>
<nowiki>!B column heading</nowiki><br>
<nowiki>|-</nowiki><br>
<nowiki>| A column content</nowiki><br>
<nowiki>| B column content</nowiki><br>
<nowiki>|}</nowiki>
<br><br>
For more fancy variations on collapsible tables, see the [http://en.wikipedia.org/wiki/Help:Collapsing Wikipedia help page.]
<br><br>
===Floating tables===
To make a table float beside your text, instead of sitting above or below it, you can follow the example below:<br><br>
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.
{| 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.<br>
Here is more text to put beside the table. Look at that table float. Float, table, float.
Keep on floating.<br><br>
''Coding for the above example:''<br>
:<nowiki>{| style="float: right;" border="1"</nowiki><br>
:<nowiki>! A column</nowiki><br>
:<nowiki>! B column</nowiki><br>
:<nowiki>! C column</nowiki><br>
:<nowiki>|-</nowiki><br>
:<nowiki>| more stuff</nowiki>
:<nowiki>| more stuff</nowiki>
:<nowiki>| even more stuff</nowiki>
:<nowiki>|-</nowiki><br>
:<nowiki>| other things</nowiki><br>
:<nowiki>| even more things</nowiki><br>
:<nowiki>| look at all these things</nowiki><br>
:<nowiki>|}</nowiki><br>
:This text is beside the table. Note the floating-table to the right.<br>
: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]]
* [http://en.wikipedia.org/wiki/Wikipedia:Tables Wikipedia:Manual of Style (tables)]
[[Category: GCPEDIA Help|T]]
[[Fr:Aide:Tableaux]]
