| Help
|
| General Help
|
| Special Topics
|
| For more help...
Contact an administrator
Or leave a message
|
A collapsible table is a special kind of table whose contents can be hidden.
The basic collapsible table has at least one element with content, and a header. The header is not hideable, and should describe the contents within the table.
Simple example
To make a table "collapsible", you merely need to set the table's class as collapsible. For a [show] or [hide] link to appear, the table's first row must be a header row, i.e. begin (in wikisyntax) with an exclamation mark (no header row means no text gets hidden, either). The use of the class toccolours in the example below is merely for appearance; it is not needed for collapsing to function:
{| class="toccolours collapsible" width="250"
!colspan="2"| This header never disappears.
|-
| This column... || ...and this column can be collapsed.
|}
|
| This header never disappears.
|
| This column... |
...and this column can be collapsed.
|
|
One-element example, initially expanded:
{| class="collapsible" border=1 width="250"
!Never disappearing header
|-
|Text to appear/disappear
|}
|
| Never disappearing header
|
| Text to appear/disappear
|
|
Auto-collapsing tables
You have two choices of auto-collapse. In addition to the collapsible class, you can add either collapsed or autocollapse. The first always initially collapses a table. autocollapse only initially collapses a table if there are at least two collapsible tables on a page.
{| class="toccolours collapsible autocollapse" width="250"
|-
! colspan="2" align="left" | This autocollapse table
will initially collapse because there are at least
two collapsible tables on this page.
|-
| Column A || Column B
|}
|
| This autocollapse table will initially collapse because there are at least two collapsible tables on this page.
|
| Column A |
Column B
|
|
{| class="toccolours collapsible collapsed" width="250"
|-
! colspan="2" | This table will always initially collapse
|-
| Column A || Column B
|}
|
| This table will always initially collapse
|
| Column A |
Column B
|
|
One-element example, initially collapsed:
{| class="collapsible collapsed" width="250" border=1
!Never disappearing header
|-
|Text to appear/disappear
|}
|
| Never disappearing header
|
| Text to appear/disappear
|
|
Sortable collapsible tables
Collapsible tables can also be sorted using the "wikitable sortable" class. When you click an arrow at the top of a column, the contents of the column are shuffled appropriately. See the following example:
| initially expanded |
initially collapsed
|
| numbers
|
| name |
number
|
| a |
123
|
| b |
6
|
| c |
45
|
|
|
| numbers
|
| name |
number
|
| a |
123
|
| b |
6
|
| c |
45
|
|
|
For additional help on sorting, see Help:Sorting on Wikipedia.
Notes
Browser Notes
The collapsible tables code works best with IE or Opera. To ensure that it works correctly with Mozilla Firefox, remember to specify the width of the table. Tables which are initially collapsed in Firefox require the show link to be clicked twice in order to open if the width is not specified. In such cases, it is best to specify the desired width necessary for viewing when expanded.
Implementation notes
Having the collapsing text on the same line or no header at all is not desired, so that is why an unhideable header row is required. Without a header row, there is a large potential for abuse since nothing would be known about the contents of the table.
Also, the show/hide links are hard coded because being able to change the link would essentially let users make the link hidden, which is also undesirable. Having large amounts of unviewable text is a reason some search engines delete sites from their listings.
See also