table.html

<table id="myTable" class="w3-table-all">
  <tr>
    <th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(1)')" style="cursor:pointer" class='w3-hover-grey'>Country <i class="fa fa-sort" style="font-size:13px;"></i></th>
    <th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(2)')" style="cursor:pointer" class='w3-hover-grey'>Capital <i class="fa fa-sort" style="font-size:13px;"></i></th>
  </tr>
  <tr class="item">
    <td>India</td>
    <td>New Delhi</td>
  </tr>
  <tr class="item">
    <td>China</td>
    <td>Beijing</td>
  </tr>
  <tr class="item">
    <td>Morocco</td>
    <td>Rabat</td>
  </tr>
  <tr class="item">
    <td>Algeria</td>
    <td>Algiers</td>
  </tr>
  <tr class="item">
    <td>United Kingdom</td>
    <td>London</td>
  </tr>
  <tr class="item">
    <td>France</td>
    <td>Paris</td>
  </tr>
  <tr class="item">
    <td>Zimbabwe</td>
    <td>Harare</td>
  </tr>
</table>