<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.tablesorter.ru/themes/blue/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.tablesorter.ru/jquery.tablesorter.js"></script>
<script>
$(function() {
$('#ranking').tablesorter();
});
</script>
</head>
<body>
<table id="ranking" class="tablesorter">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
<td>row 1, column 3</td>
<td>row 1, column 4</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
<td>row 2, column 3</td>
<td>row 2, column 4</td>
</tr>
<tr>
<td>row 3, column 1</td>
<td>row 3, column 2</td>
<td>row 3, column 3</td>
<td>row 3, column 4</td>
</tr>
<tr>
<td>row 4, column 1</td>
<td>row 4, column 2</td>
<td>row 4, column 3</td>
<td>row 4, column 4</td>
</tr>
</tbody>
</table>
</body>
</html>