title: jQuery Tablesorter does not work on a table that is generated with php
body: <p>This is a similar question to this one: <a href="https://stackoverflow.com/questions/2441057/mysql-php-generated-table-doesnt-work-with-tablesorter">Mysql PHP generated table: doesn&#39;t work with Tablesorter</a></p>
  
  <p>But, there is one slight difference: I generate tables directly in the same file, not an external file therefore <code>.load</code> is not an option.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;Tablesorter testing page&lt;/title&gt;
  
    &lt;link rel="stylesheet" href="style.css" type="text/css"/&gt;
  
    &lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="jquery.tablesorter.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      $(document).ready(function() { 
          $("#races").tablesorter();
      }); 
    &lt;/script&gt;
   &lt;/head&gt;
  &lt;body&gt;
   &lt;?php
      $db = new mysqli("localhost", "user", "password", "database");
  
      $query = "SELECT name, date FROM races";
  
      $result = $db-&gt;query($query, MYSQLI_STORE_RESULT);
  
      $o = '&lt;table id="races"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Date&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;';
  
      while(list($name, $date) = $result-&gt;fetch_row()) {
          $o .= '&lt;tr&gt;&lt;td&gt;'.$name.'&lt;/td&gt;&lt;td&gt;'.$date.'&lt;/td&gt;&lt;/tr&gt;';
      }
  
      $o .= '&lt;/tbody&gt;&lt;/table&gt;';
  
      echo $o;
  ?&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is that the table is not formatted, as if the Tablesorter is called on an empty table? If I hardcode a html table Tablesorter works ok on that on.</p>
  
  <p>So, how do I make it work?</p>
  
  <p>EDIT: Below is the generated .html code</p>
  
  <pre><code>&lt;html&gt;
       &lt;head&gt;
        &lt;title&gt;Tablesorter testing page&lt;/title&gt;
  
        &lt;link rel="stylesheet" href="style.css" type="text/css"/&gt;
  
        &lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="jquery.tablesorter.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script&gt;
          $(document).ready(function() { 
              $("#races").tablesorter();
          }); 
        &lt;/script&gt;
       &lt;/head&gt;
      &lt;body&gt;
       &lt;table id="races"&gt;
  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Date&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
  &lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Race 1&lt;/td&gt;&lt;td&gt;2012-01-01&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Race 2&lt;/td&gt;&lt;td&gt;2012-01-01&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>