problem with tablesorter, only first row sortable

problem with tablesorter, only first row sortable

Hello
This is my first time using html and jquery, so my code might be bad. Still, i made a table and I want to sort it, but somehow, only the first row is sortable and I dont know why. Here is my code:

<html>
<head>
<script type="text/javascript" src=" http://tablesorter.com/jquery-latest.js"></script> 
<script type='text/javascript'>
$(document).ready(function() { 
    // call the tablesorter plugin 
    $("#myTable").tablesorter();
}); 
</script>
</head>
<body>
<div STYLE=" height: 200px; width:680px; font-size: 12px; overflow: auto;">
<?php

$db = JFactory::getDbo();

// Create a new query object.
$query = $db->getQuery(true);

$query->select($db->quoteName(array('x', 'y', 'z')));
$query->from($db->quoteName('DATABASE_TABLE1'));

//$query->order('id');


// Reset the query using our newly populated query object.
$db->setQuery($query);

$result = $db->loadAssocList();
?>

<table id="myTable" class="tablesorter">
<thead> 
<tr> 
<th> x</th> 
<th>y</th> 
<th>z</th> 

</tr> 
</thead> 
<?php
echo '<tr class="blank_row"><td></td>';

foreach ($result as $row) { 
echo '<tr>';
echo '<td>' . $row['x'] . '</td>';
echo '<td>' . $row['y'] . '</td>';
echo '<td>' . $row['z'] . '</td>';
echo '</tr>';
}
?>
</table>
</div> 
</body>
</html>