managing html table with tableSorter jquery plugin

Question

I have a sample html table like this

<table class="statisticsTable" id="myTable">
<tr>
    <th colspan="6">This is heading</th>
</tr>
<thead>
<tr>
    <th>Member Num</th>
    <th>Member First Name</th>
    <th>Member Last Name</th>
    <th>Date of Birth</th>
    <th>Age</th>
    <th>Relationship</th>
</tr>
</thead>
<tbody>
<tr>
    <td valign="top">123456</td>
    <td>test1</td>
    <td>test1 ln</td>
    <td>06/14/1984</td>
    <td>24</td>
    <td>awesome</td>
 </tr>
<tr>
    <td valign="top">654321</td>
    <td>test2</td>
    <td>test2 ln</td>
    <td>06/21/1984</td>
    <td>42</td>
    <td>awesome1</td>
 </tr>
 <tr>
    <td valign="top">954712</td>
    <td>test3</td>
    <td>test3 ln</td>
    <td>06/14/1956</td>
    <td>66</td>
    <td>awesome0</td>
 </tr>
</tbody>

the tableSorter plugin does sorting on everything inside the <thead> tag. Thats why all my column headers are inside it. However, I am having a problem with the 'This is Heading'. It is appearing AFTER the columns. I want it to appear before the columns. And I can not put it in <thead> as I do not wish for it to be included in the sorting.

What is the alternative?

Answer 1

Perhaps, instead of using another row for the "This is heading", use a <caption> element?

So: <caption>This is heading</caption>

Answer 2

figured it out. I can put the heading inside the thead and just disable sorting on that column like this example