HTML Table Row Highlight

<style type="text/css">
table.selectable-table { border-collapse:collapse; border:1px solid #ccc; text-align:left; background:#ddd;}
table.selectable-table tbody tr:hover { background:#ccc; cursor:pointer; }
</style>
<table class="selectable-table">
  <thead>
    <tr>
      <th>City</th><th>Province</th><th>Population</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Toronto        </td><td>Ontario         </td><td>5,113,149</td></tr>
    <tr><td>Montreal       </td><td>Quebec          </td><td>3,635,571</td></tr>
    <tr><td>Vancouver      </td><td>British Columbia</td><td>2,116,581</td></tr>
    <tr><td>Ottawa-Gatineau</td><td>Ontario/Quebec  </td><td>1,130,761</td></tr>
    <tr><td>Calgary        </td><td>Alberta         </td><td>1,079,310</td></tr>
    <tr><td>Edmonton       </td><td>Alberta         </td><td>1,034,945</td></tr>
    <tr><td>Quebec City    </td><td>Quebec          </td><td>  715,515</td></tr>
    <tr><td>Winnipeg       </td><td>Manitoba        </td><td>  694,668</td></tr>
    <tr><td>Hamilton       </td><td>Ontario         </td><td>  692,911</td></tr>
    <tr><td>London         </td><td>Ontario         </td><td>  457,720</td></tr>
  </tbody>
</table>