<table id="myTable">   
<thead>   
<tr>   
      <th>Фамилия</th>   
      <th>Имя</th>   
      <th>Email</th>   
      <th>Платеж</th>   
      <th>Сайт</th>   
</tr>   
</thead>   
<tbody>   
<tr>   
      <td>Иванов</td>   
      <td>Петр</td>   
      <td>ivanov@gmail.com</td>   
      <td>$50.00</td>   
      <td>http://www.ivanov.ua</td>   
</tr>   
<tr>   
      <td>Петров</td>   
      <td>Иван</td>   
      <td>petrov@yandex.ru</td>   
      <td>$50.00</td>   
      <td>http://www.petrov.com.ru</td>   
</tr>   
<tr>   
      <td>Сергеев</td>   
      <td>Михаил</td>   
      <td>sergeed@mail.ru</td>   
      <td>$100.00</td>   
      <td>http://www.sergeev.ru</td>   
</tr>   
<tr>   
      <td>Михайлов</td>   
      <td>Потап</td>   
      <td>medvedev@rambler.ru</td>   
      <td>$50.00</td>   
      <td>http://www.yandex.com</td>   
</tr>   
</tbody>   
</table>   
      

<script type="text/javascript">
$(document).ready(function()   
      {   
          $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );   
      }   
);   
</script>

table.tablesorter {
   font-size: 12px;
   background-color: #4D4D4D;
   width: 1024px;
   border: 1px solid #000;
}
table.tablesorter th {
   text-align: left;
   padding: 5px;
   background-color: #6E6E6E;
}
table.tablesorter td {
   color: #FFF;
   padding: 5px;
}
table.tablesorter .even {
   background-color: #3D3D3D;
}
table.tablesorter .odd {
   background-color: #6E6E6E;
}
table.tablesorter .header {
   background-image: url(/table/bg.png);
   background-repeat: no-repeat;
   border-left: 1px solid #FFF;
   border-right: 1px solid #000;
   border-top: 1px solid #FFF;
   padding-left: 30px;
   padding-top: 8px;
   height: auto;
}
table.tablesorter .headerSortUp {
   background-image: url(/table/asc.png);
   background-repeat: no-repeat;
}
table.tablesorter .headerSortDown {
   background-image: url(/table/desc.png);
   background-repeat: no-repeat;
}