带表分类器的选项卡式表

I'm using Tablesorter 2.0 and I have multiple tables. I want them to be tabbed. To help you understand my point, dataTables has similar option (http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html).

Initalization code:

$(function() {
    $("table")
        .tablesorter({widthFixed: true, widgets: ['zebra']})
        .tablesorterPager({container: $("#pager")});

});

For example one of my tables:

<div class="table">
<table cellspacing="1" class="tablesorter">
<thead>
    <tr>
        <th>Name</th>
        <th>Carbohydrates (g)</th>
        <th>Proteins (g)</th>
        <th>Fats (g)</th>
        <th>Kcal</th>
        <th>IG</th>
    </tr>
</thead>
<tbody>     
    <tr>
        <td>Potatos</td>
        <td>18.3</td>
        <td>1.9</td>
        <td>0.1</td>
        <td>82 kcal</td>
        <td>90</td>
    </tr>               
</tbody>
</table>
</div>

I know that i have to put it to something like:

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Bakery</li>
    <li><a href="#tabs-2">Fruits</li>
    <li><a href="#tabs-3">Vegetables</li>
</ul>
<div id="tabs-1">           
</div>        
<div id="tabs-2">               
</div>
<div id="tabs-3">           
</div>
</div>

Because of my small knowledge in javascript i'm asking you to tell me, or give me a tip how to do it.

I think the problem is just that there isn't a closing </a> in the tabs list. Try this format (demo):

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Bakery</a></li>
        <li><a href="#tabs-2">Fruits</a></li>
        <li><a href="#tabs-3">Vegetables</a></li>
    </ul>

    <div id="tabs-1">
        <table class="tablesorter">
            ...
        </table>
    </div>

    <div id="tabs-2">
        <table class="tablesorter">
            ...
        </table>
    </div>

    <div id="tabs-3">
        <table class="tablesorter">
            ...
        </table>
    </div>

</div>

javascript

$('#tabs').tabs();
$('.tablesorter').tablesorter();