Collapsing <table> Rows 
On the previous page, we discussed creating collapsible elements in your customized templates.

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>
On the other hand, this next block of code is valid XHTML. Notice that the first row of the table is enclosed with <thead> tags, and all other rows in the table are enclosed by a <tbody> container.
<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>
Here is that same block of code with the first two content rows set to allow collapsing:
<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>
When expanded, this code will result in a table looking like this:

... and when collapsed, the same code produces this:

Colin 20th Apr 2005, 11:06am
To have collapsable tables be closed by default, add

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!