Difference between revisions of "User:Belgrave/Wiki Hints/Sorting and Hiding Tables"
From Fallen Sword Wiki
< User:Belgrave | Wiki Hints
| Line 1: | Line 1: | ||
{| class="collapsible collapsed" style="width:100%; background:none" align="center" cellspacing="5" | {| class="collapsible collapsed" style="width:100%; background:none" align="center" cellspacing="5" | ||
| − | ! colspan="2" style="background-color:#cd9e4b; color:#000; border:1px solid #cd9e4b; font-size:90%; text-align:left; -moz-border-radius:15px" | http:// | + | ! colspan="2" style="background-color:#cd9e4b; color:#000; border:1px solid #cd9e4b; font-size:90%; text-align:left; -moz-border-radius:15px" | http://huntedcow.cachefly.net/fs/skin/online.gif '''Sorting and Hiding Tables''' <span class="plainlinks">[{{fullurl:User:Belgrave/Wiki Hints/Sorting and Hiding Tables|action=edit}}<small><span style="color:#060">+</span></small>]</span> |
|- | |- | ||
| colspan="2" align="center" | <span style="font-size:90%">Many times, information listed in a table would be very helpful if you could sort it based on the information in each column. This is done by adding <tt>class="sortable"</tt> to the table. There must be a table header row for this to work.</span> | | colspan="2" align="center" | <span style="font-size:90%">Many times, information listed in a table would be very helpful if you could sort it based on the information in each column. This is done by adding <tt>class="sortable"</tt> to the table. There must be a table header row for this to work.</span> | ||
Latest revision as of 23:15, 30 November 2013
 Sorting and Hiding Tables +
| |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Many times, information listed in a table would be very helpful if you could sort it based on the information in each column. This is done by adding class="sortable" to the table. There must be a table header row for this to work. | |||||||||||||
|
{| class="sortable" width="100%"
! Col 1 !! Col 2 !! Col 3
|-
| 1 || green || 45
|-
| 6 || blue || 23
|-
| 4 || red || 44
|}
|
| ||||||||||||
| When the information in a table is useful but not always needed, it can be helpful to hide (collapse) a table and make it less obtrusive to the rest of the page. This is done by adding class="collapsible" to the table. There must be a table header for this to work. | |||||||||||||
|
{| class="collapsible" width="100%"
! colspan="3" | header
|-
| 1 || green || 45
|-
| 6 || blue || 23
|-
| 4 || red || 44
|}
|
| ||||||||||||
| To have a table load already collapsed, use class="collapsible collapsed". You can also have a sortable collapsed table, once again by adding all the classes so you have class="collapsible collapsed sortable" | |||||||||||||
