jsFiddle/Gist TableSort demo

jsFiddle demo hosted on Gist author(s): Gary Smith

HTML

<script src="/js/empty.js"></script>
<link rel="stylesheet" href="/css/normalize.css">
<script src="https://raw.github.com/gist/1663452/7f6270af1e695cea8198164979d726cae566f026/tablesort.js"></script>
        <table id="sales" summary="Quarterly Sales (stated in millions of dollars)">
            <caption>Quarterly Sales*</caption>
            <thead>
                <tr>
                    <th>Companies</th>
                    <th>Q1</th>
                    <th>Q2</th>
                    <th>Q3</th>
                    <th>Q4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Company A</th>
                    <td>$621</td>
                    <td>$942</td>
                    <td>$224</td>
                    <td>$486</td>
                </tr>
                <tr>
                    <th>Company B</th>
                    <td>$147</td>
                    <td>$1,325</td>
                    <td>$683</td>
                    <td>$524</td>
                </tr>
                <tr>
                    <th>Company C</th>
                    <td>$135</td>
                    <td>$2,342</td>
                    <td>$33</td>
                    <td>$464</td>
                </tr>
                <tr>
                    <th>Company D</th>
                    <td>$164</td>
                    <td>$332</td>
                    <td>$331</td>
                    <td>$438</td>
                </tr>
                <tr>
                    <th>Company E</th>
                    <td>$199</td>
                    <td>$902</td>
                    <td>$336</td>
                    <td>$1,427</td>
                </tr>
            </tbody>
        </table>
        <p class="footnote">*Stated in millions of dollars</p>

CSS

table {
	border: solid 1px #fc0;
	border-collapse: collapse;
}

table caption {
	font-weight: bold;
	font-size: 125%;
	text-transform: uppercase;
}

.footnote {
	font-size: 75%;
	color: #666;
}

table caption,
table th,
table td,
.footnote {
	font-family: Arial, Helvetica, sans-serif;
	padding: .5em;
}

table td {
	border: solid 1px #c96;
}


table th {
	background-color: #ec9;
	color: #630;
	border-bottom: solid 1px #c96;
}

table thead th {
	background: #fea;
	border-bottom: solid 3px #630;
}

table thead th a {
	color: #630;
	display: block;
	padding: 0 17px;
	background: #fea url(http://wps.scopevale.net/scripts/css/tablesort/arrow-up.gif) no-repeat right center;
}

table thead th.asc a {
	background: #fea url(http://wps.scopevale.net/scripts/css/tablesort/arrow-up-sel.gif) no-repeat right center;
}

table thead th.dsc a {
	background: #fea url(http://wps.scopevale.net/scripts/css/tablesort/arrow-dn-sel.gif) no-repeat right center;
}

JavaScript

window.onload = function() {
    var sales = new TableSort("sales");
};