Sometimes you will want to allow your users to collapse individual rows (or groups of rows) within an HTML <table>. In order to be cross-browser compatible, and to ensure that your pages remain XHTML compliant, there are a few additional rules you need to follow.
It is not possible to arbitrarily collapse every tag in HTML. To collapse rows within a <table>, you must surround those rows with the little-known <tbody> tag.
The original idea of the <tbody> tag was to enable browsers to display the top (head) and bottom (foot) of a table, and then load the body of the table in between the head and foot. Unfortunately, very few browsers can actually make use of this system.
However, the <tbody> tag is very useful to us, as it allows us to define a container for one or more table rows, and we can expand and collapse that container using our collapsible elements system.
There is one caveat. In order to be legal XHTML, we can't just stuff <tbody> tags selectively around arbitrary groups of rows in a table, and leave the other rows without a container. We must include the <thead> tag, and ensure that all rows in the table are enclosed either by the <thead> or a <tbody> tag.
The following code is not XHTML compliant because it does not include the <thead> tag, and there are rows that are not enclosed by <thead>, <tbody> or <tfoot> tags:
<table class="tborder" cellpadding="$stylevar[cellpadding]" width="100%"> <tr><td class="tcat"><strong>Table title</strong></td></tr> <tbody> <tr><td class="alt1">First row of collapsible element</td></tr> <tr><td class="alt2">Second row of collapsible element</td></tr> </tbody> <tr><td class="alt1">Another row</td></tr> </table>
<table class="tborder" cellpadding="$stylevar[cellpadding]" width="100%"> <thead> <tr><td class="tcat"><strong>Table title</strong></td></tr> </thead> <tbody> <tr><td class="alt1">First row of collapsible element</td></tr> <tr><td class="alt2">Second row of collapsible element</td></tr> </tbody> <tbody> <tr><td class="alt1">Another row</td></tr> </tbody> </table>
<table class="tborder" cellpadding="$stylevar[cellpadding]" width="100%"> <thead> <tr><td class="tcat"> <a href="#top" style="float:$stylevar[right]" onclick="return toggle_collapse('MyELEMENT')"><img id="collapseimg_MyELEMENT" src="$stylevar[imgdir_button]/collapse_tcat$vbcollapse[collapseimg_MyELEMENT].gif" alt="" border="0" /></a> <strong>Table title</strong> </td></tr> </thead> <tbody id="collapseobj_MyELEMENT" style="$vbcollapse[collapseobj_MyELEMENT]"> <tr><td class="alt1">First row of collapsible element</td></tr> <tr><td class="alt2">Second row of collapsible element</td></tr> </tbody> <tbody> <tr><td class="alt1">Another row</td></tr> </tbody> </table>
style="display:none"
to the <tbody> element that should be collapsed.
For example:
<tbody id="collapseobj_MyELEMENT" style="$vbcollapse[collapseobj_MyELEMENT]; display:none">
Careful! The boxes closed by default can not be opened by users that have javascript turned off!