Help:Collapsible tables - Revision history

imported>Hardvice: +Helpbox

2007-11-10T11:29:28Z

+Helpbox

← Older revision		Revision as of 11:29, 10 November 2007
(No difference)

imported>Hardvice: +Helpbox

2007-11-10T11:29:28Z

+Helpbox

← Older revision		Revision as of 11:29, 10 November 2007
Line 1:		Line 1:
			{{helpbox}}
	A '''collapsible table''' is a special kind of table whose contents can be hidden.<br>		A '''collapsible table''' is a special kind of table whose contents can be hidden.<br>
	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.		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.

imported>MiamiVolts: /* Browser Notes */ gr

2007-10-31T01:49:39Z

Browser Notes: gr

← Older revision		Revision as of 01:49, 31 October 2007
Line 140:		Line 140:
	== Notes ==		== Notes ==
	=== Browser 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 no specified. In such cases, it is best to specify the desired width necessary for viewing when expanded.		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 ===		=== Implementation notes ===

imported>MiamiVolts: /* Browser Notes */ caps

2007-10-31T01:49:09Z

Browser Notes: caps

← Older revision		Revision as of 01:49, 31 October 2007
Line 140:		Line 140:
	== Notes ==		== Notes ==
	=== Browser 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 no specified. In such cases, it is best to specify the desired width necessary for viewing when expanded.		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 no specified. In such cases, it is best to specify the desired width necessary for viewing when expanded.

	=== Implementation notes ===		=== Implementation notes ===

imported>MiamiVolts: expand notes

2007-10-31T01:47:58Z

expand notes

← Older revision		Revision as of 01:47, 31 October 2007
Line 138:		Line 138:
	For additional help on sorting, see [[Wikipedia:Help:Sorting\|Help:Sorting on Wikipedia]].		For additional help on sorting, see [[Wikipedia:Help:Sorting\|Help:Sorting on Wikipedia]].

	== ~~Implementation notes~~ ==		== 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 no 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.		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.
	<br>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.		<br>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.

imported>Admin: adding collapsible table instructions written by Bigfoot Lover @ BionicWiki.com

2007-09-29T14:34:57Z

adding collapsible table instructions written by Bigfoot Lover @ BionicWiki.com

New page

A '''collapsible table''' is a special kind of table whose contents can be hidden.<br>
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 '''<code>collapsible</code>'''. 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 <code>toccolours</code> in the example below is merely for appearance; it is not needed for collapsing to function:
{| width="80%" colspan="2" cellpadding="2" border=0
|- valign="top"
|
<pre>
{| class="toccolours collapsible" width="250"
!colspan="2"| This header never disappears.
|-
| This column... || ...and this column can be collapsed.
|}
</pre>
|
{| class="toccolours collapsible" width="250"
!colspan="2"| This header never disappears.
|-
| This column... || ...and this column can be collapsed.
|}
|-
|}
One-element example, initially expanded:
{| width="80%" colspan="2" cellpadding="2" border=0
|- valign="top"
|
<pre>
{| class="collapsible" border=1 width="250"
!Never disappearing header
|-
|Text to appear/disappear
|}
</pre>
|
{| class="collapsible" border=1 width="250"
!Never disappearing header
|-
|Text to appear/disappear
|}
|-
|}

====Auto-collapsing tables====
You have two choices of auto-collapse. In addition to the <code>collapsible</code> class, you can add either '''<code>collapsed</code>''' or '''<code>autocollapse</code>'''. The first always initially collapses a table. <code>autocollapse</code> only initially collapses a table if there are at least two collapsible tables on a page.
{| width="80%" colspan="2" cellpadding="2" border=0
|- valign="top"
|
<pre>{| 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
|}
</pre>
|
{| 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
|}
|-
|}
{| width="80%" colspan="2" cellpadding="2" border=0
|- valign="top"
|
<pre>{| class="toccolours collapsible collapsed" width="250"
|-
! colspan="2" | This table will always initially collapse
|-
| Column A || Column B
|}</pre>
|
{| class="toccolours collapsible collapsed" width="250"
|-
! colspan="2" | This table will always initially collapse
|-
| Column A || Column B
|}
|-
|}
One-element example, initially collapsed:
{| width="80%" colspan="2" cellpadding="2" border=0
|- valign="top"
|
<pre>{| class="collapsible collapsed" width="250" border=1
!Never disappearing header
|-
|Text to appear/disappear
|}</pre>
|
{| class="collapsible collapsed" width="250" border=1
!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:
{| border=1 width="60%"
!initially expanded!!initially collapsed
|- width="50% valign="top" align="center"
|
{|class="collapsible" width="250"
!numbers
|- width="50%"
|
{|class="wikitable sortable"
!name!!number
|-
|a||123
|-
|b||6
|-
|c||45
|}
|}
|
{|class="collapsible collapsed" width="250"
!numbers
|-
|
{|class="wikitable sortable"
!name!!number
|-
|a||123
|-
|b||6
|-
|c||45
|}
|}
|}
For additional help on sorting, see [[Wikipedia:Help:Sorting|Help:Sorting on Wikipedia]].

== 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.
<br>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==
* [[Help:Editing#Tables]]

[[Category:Help]]