Tablesorter demo

All options included, as well as the uitheme widget

by uggway

HTML

<script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<table cellspacing="1" class="tablesorter">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Total</th>
            <th>Discount</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>28</td>
            <td>$9.99</td>
            <td>20%</td>
            <td>Jul 6, 2006 8:14 AM</td>
        </tr>
        <tr>
            <td>John</td>
            <td>Hood</td>
            <td>33</td>
            <td>$19.99</td>
            <td>25%</td>
            <td>Dec 10, 2002 5:14 AM</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>18</td>
            <td>$15.89</td>
            <td>44%</td>
            <td>Jan 12, 2003 11:14 AM</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Almighty</td>
            <td>45</td>
            <td>$153.19</td>
            <td>44%</td>
            <td>Jan 18, 2001 9:12 AM</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Evans</td>
            <td>22</td>
            <td>$13.19</td>
            <td>11%</td>
            <td>Jan 18, 2007 9:12 AM</td>
        </tr>
    </tbody>
</table>

CSS

/* tables */
table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
table .header {
    cursor: pointer;
}

table .header:after {
  content: "";
  float: right;
  margin-top: 7px;
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #000000 transparent;
}

table .headerSortUp, table .headerSortDown {
  background-color: #f7f7f9;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

table .header:hover:after {
  visibility: visible;
}

table .headerSortDown:after, table .headerSortDown:hover:after {
  visibility: visible;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}

table .headerSortUp:after {
  border-bottom: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #000000;
  visibility: visible;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  opacity: 0.6;
}