tablesorter with th

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.8/js/jquery.tablesorter.min.js"></script>
    <table width="100%" bgcolor="#003399" cellspacing="0" cellpadding="1" border="0">
			    <tbody><tr><td>
				    <table width="100%" bgcolor="#FFFFFF" cellspacing="0" cellpadding="2" border="0">
					    <tbody><tr bgcolor="#003399">
					
						    <td colspan="4" class="white"><b>Click on the Group for more information: </b></td>
					
					    </tr>
					
						    <tr bgcolor="white"><td align="center" colspan="4"><img src="#">&nbsp;Indicates Group is accepting new members.</td></tr>
					
					    <tr bgcolor="#eeeeee">
						    <td>&nbsp;</td>
						    <td><b>Group Name</b></td>
						    <td><b>Group Captain</b></td>
						
						    <td><b>Donation Total</b></td>
						
					    </tr>
					    <tr bgcolor="#ffffff"><td></td><td><a href="#">test1</a></td><td>test test</td><td>$20.00</td></tr><tr bgcolor="#eeeeee"><td></td><td><a href="#">test2</a></td><td>test test</td><td>$50.00</td></tr>
		    <tr bgcolor="#ffffff"><td align="center" colspan="4"><img src="#">&nbsp;Indicates Group is accepting new members from the public.</td></tr>					
	
				    </tbody></table>
			    </td></tr>
		    </tbody></table>

CSS

#newTable{
    width:100%
}

JavaScript

var $existTable= $('table td table');

var $newTable = $('<table id="newTable"><thead></thead><tbody></tbody></table>');
$newTable.find('thead').append($existTable.find('tr').eq(2));
$newTable.find('tbody').append($existTable.find('tr:gt(1)'));
$existTable.parent().append( $newTable );


$newTable.tablesorter({

    // default sortInitialOrder setting 
    sortInitialOrder: "asc", 

    // pass the headers argument and passing a object 
    headers: {
        
        sortList: [[2,1]]
        
    }

});