jquery ui tabs / tables problem

<div id="jqueryui-tabs-wrapper">
    <div id="tabs-x">
        <div id="tab-list">
            <ul>
            <li><a href="#tabs-1">Greece</a></li>
            <li><a href="#tabs-2">Brazil</a></li>
            <li><a href="#tabs-3">Spain</a></li>
            </ul>
        </div>  <!--end tab list-->

        <div id="tab-content">

            <div id="tabs-1">
It’s early Saturday afternoon and Adrian Chiles, Fabio Cannavaro, Patrick Vieira and Martin O’Neill, all wearing the requisite sports commentator uniform of a buttoned-down long-sleeve shirt and smart trousers (often too tight on the English commentators, for some reason), are supposed to be researching the Argentina v Iran match for their upcoming live show.
            </div><!--end tab 1-->

            <div id="tabs-2">

<div class="service-table">
<div class="datagrid">
<table>
<thead>
<tr>
<th>Chile</th><th></th><th></th><th></th></tr></thead>
<tbody><tr><td>Lorem ipsum dolor sit</td><td>consectetur</td></tr>
<tr class="alt"><td>adipisicing elit</td><td>eiusmod</td></tr>
<tr><td>tempor incididunt</td><td>ut labore</td></tr>
</tbody>
</table>
</div><!--end datagrid-->
</div><!--end service-table-->

<div class="service-table">
<div class="datagrid">
<table>
<thead>
<tr>
<th>Chile</th><th></th><th></th><th></th></tr></thead>
<tbody><tr><td>Lorem ipsum dolor sit</td><td>consectetur</td></tr>
<tr class="alt"><td>adipisicing elit</td><td>eiusmod</td></tr>
<tr><td>tempor incididunt</td><td>ut labore</td></tr>
</tbody>
</table>
</div><!--end datagrid-->
</div><!--end service-table-->


</div>  <!--end tab 2-->

<div id="tabs-3">
“I hope Iran win or draw. It would be such a great story,” says Chiles. Vieira looks at him as if he’s the biggest dork he’s ever encountered: “No! Argentina, of course!” he says with an extreme “like duh” expression on his face and hammily rolls his eyes at me.
</div> <!--end tab 3-->

</div> <!--end tab-content -->

</div> <!--end div tabs-x-->

</div> <!--end jqueryui-tabs-wrapper-->