下面是详细代码和注释：

/**
 * 表格排序
 */
var sortTable = {
	/**
	 * 转换函数
	 * 可以将 String 类型的变量转成 Int,Float,Date 的格式
	 * @param {String} v 原来的值
	 * @param {String} tp 值类型 int,float,date,默认为 string
	 */
	convert:function(v,tp){

		switch(tp){
			case 'int':
				return parseInt(v);
			case 'float':
				return parseFloat(v);
			case "date":
				// IE6 只认 yyyy/mm/dd hh:mm:ss的格式
				return new Date(Date.parse(v.replace(/\-/g,'/')));
			default:
				return v.toString().toLowerCase();
		}
	},

	/**
	 * 对比两个行
	 * @requires sortTable.convert
	 * @param {Int} ic 排序要参照的表格序号
	 * @param {String} dt 值类型 int,float,date,默认为 string
	 */
	compareTrs:function(ic,dt){

		/**
		 * 返回一个新的对比函数
		 * @requires sortTable.convert
		 * @param {Object} r1 第一行
		 * @param {Object} r2 第二行
		 */
		return function(r1,r2){
			var v1 , v2;
			// 如果节点拥有 data-sort 属性
			// 则根据 data-sort 属性进行排序
			if(r1.cells[ic].getAttribute('data-sort')){
				v1 = sortTable.convert(r1.cells[ic].getAttribute('data-sort'),dt);
				v2 = sortTable.convert(r2.cells[ic].getAttribute('data-sort'),dt);
			}else{
				// 如果节点没有 data-sort 属性
				// 则根据节点的 nodeValue 值进行排序
				v1 = sortTable.convert(r1.cells[ic].firstChild.nodeValue,dt);
				v2 = sortTable.convert(r2.cells[ic].firstChild.nodeValue,dt);
			}
			// 默认降序排列
			if(v1 > v2){
				return -1;
			}else if(v1 < v2){
				return 1;
			}else{
				return 0;
			}

		};
	},

	/**
	 * 表格排序函数
	 * 这个表格要有 thead 和 tbody
	 * @requires sortTable.compareTrs
	 * @param {String} tid 要排序的表格 ID
	 * @param {Int} ic 排序要参照的表格序号
	 * @param {String} tp 值类型 int,float,date,默认为 string
	 */
	sortTr:function(tid,ic,dt){
		var tb = document.getElementById(tid), // 获得表格 table
		bd = tb.tBodies[0], // 获得表格的tbody
		trs = bd.rows, // 获得表格 tbody 下的行集合
		arr = [], // 用于存储 tr 行集合的列表
		i=l=trs.length, // 获得 tr 行集合的个数
		fg = document.createDocumentFragment(), // 临时片断
		st=tb.getAttribute('data-sort');

		// 将 tr 行存储到 arr 中
		while(i--){
			arr[i] = trs[i];
		}
		// st 可能为 0 或者 NaN
		if(st!=null && (parseInt(st)==ic)){
			// 如果表格当前的排序号和 ic 相等
			// 表明已经按照这个属性排序过了
			// 反排序就可以了
			arr.reverse();
		}else{
			arr.sort(sortTable.compareTrs(ic,dt));
			tb.setAttribute('data-sort',ic);
		}

		for(i=0;i<l;i++){
			fg.appendChild(arr[i]);
		}

		bd.appendChild(fg);

		tb.setAttribute('data-sort',ic);

		tb = bd = trs = arr = i = l = fg = null;

	}
};

下面是代码的使用示例，记住要排序的表格必需拥有tbody这个元素，当点击thead里面的th时，tbody中的行就根据相应的列进行排序。注意我把触发行为的代码放在表格thead中的th里了。

<table id="oTable">
	<thead>
		<tr>
			<th onclick="sortTable.sortTr('oTable',0,'date')">时间</th>
			<th onclick="sortTable.sortTr('oTable',1,'string')">姓名</th>
			<th onclick="sortTable.sortTr('oTable',2,'int')">年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<!--td data-sort="March 12, 2001 19:25:03">2001 03 12</td-->
			<td data-sort="2001-03-12">2001 03 12</td>
			<td>jon</td>
			<td>54</td>
		</tr>
		<tr>
			<td data-sort="2001-11-12">2001 11 12</td>
			<td>amy</td>
			<td>32</td>
		</tr>
		<tr>
			<td data-sort="1983-08-16">1983 08 16</td>
			<td>tom</td>
			<td>56</td>
		</tr>
		<tr>
			<td data-sort="2007-06-14">2007 06 14</td>
			<td>jim</td>
			<td>24</td>
		</tr>
		<tr>
			<td data-sort="1998-07-16">1998 07 16</td>
			<td>Lucy</td>
			<td>18</td>
		</tr>
	</tbody>
</table>

td{
    height:300px; /* 等效于普通元素的 min-height */
}

虽然table是按行组建的，但你仍然可以通过“colgroup”和“col”两个元素来寻址列或一组列，还能给它们设置属性，比如“class”。

你可以通过“bolgroup”来给一列设置属性，也可以使用“span”来给一组列设置属性，而“span”的用法和“rowspan”、“colspan”的用法是一样的。看下面的实例代码：

<table>
	<caption>Caption</caption>
	<colgroup>
		<col />
		<col class="alternative" />
		<col span="2" class="alternative" />
	</colgroup>
	<tr>
		<td>This</td>
		<td>That</td>
		<td>The other</td>
		<td>Lunch</td>
		<td>Lunch</td>
	</tr>
	<tr>
		<td>Ladybird</td>
		<td>Locust</td>
		<td>Lunch</td>
		<td>Lunch</td>
		<td>Lunch</td>
	</tr>
</table>

不过目前在colgroup中的样式仅支持borders，backgrounds，width和visibility属性。