Place this code to your header.php
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/YourFolder/jquery-latest.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/YourFolder/jquery.tablesorter.js"></script> />
“YourFolder” is a folder under your theme directory, copy and paste jQuery-latest.js and jQuery.tablesorter.js to “YourFolder”
In your post or page. place following code
<table id="YourTableName">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
<th>Salary</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>California</td>
<td>$5000</td>
<td>https://www.jhon.com</td>
</tr>
<tr>
<td>2</td>
<td>Udin</td>
<td>Majalaya</td>
<td>$10000</td>
<td>https://www.udin.com</td>
</tr>
</tbody>
</table>
Place this code into javascript jquery.tablesorter.js
$(document).ready(function()
{
$("#YourTableName").tablesorter();
}
);
YorTableName is your table ID that you can change. you can customize your table.
may be that’s what I know, I don’t know how to customize it with my css theme, anyone who can add?