怎么样才能随意调节表格大小

<script language=javascript>
function m()
{
var t1=document.getElementById("t1");
if(t1.width>800 || t1.height>500)
{
alert("已经达到上限!");
}
t1.width=parseInt(t1.width)+10;
t1.height=parseInt(t1.height)+10;
}
function n()
{
var t1=document.getElementById("t1");
if(t1.width<100 || t1.height<50)
{
alert("已经达到上限!");
}
t1.width=parseInt(t1.width)-10;
t1.height=parseInt(t1.height)-10;
}
</script>
<div id="d1">
<table border=0 cellspacing=1 cellpadding=0 bgcolor="#000000" id="t1"

width=200 height=100>
<tr bgcolor="#FFFFFF"><td>111111111111111111</td></tr>
</table>
</div>
<input type=button value="大" onclick="m();">
<input type=button value="小" onclick="n();">

<style>
span {position:relative;z-index:1;background:red;width:2px;height:18px;left:expression(this.parentElement.offsetWidth-2);cursor:e-resize;}
</style>
<script language="javascript">

function DownTo(obj){
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MoveTo(obj){

 if(!obj.mouseDownX){return false;}

 var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;

 if(newWidth>0){
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function UpTo(obj){obj.releaseCapture();obj.mouseDownX=0;}
</script>
</head>

<table id="theObjTable" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;width:80%;table-layout:fixed;">
    <tr bgcolor="cccccc">
        <td><span onmousedown="DownTo(this)" onmousemove="MoveTo(this)" onmouseup="UpTo(this)"></span>aaa</td>
        <td><span onmousedown="DownTo(this)" onmousemove="MoveTo(this)" onmouseup="UpTo(this)"></span>bbb</td>
        <td><span onmousedown="DownTo(this)" onmousemove="MoveTo(this)" onmouseup="UpTo(this)"></span>ccc</td>
    </tr>
    <tr>
        <td>aaaa fdsa fda fdsa fdsa fdsa fdsa </td>
        <td>bbbb</td>
        <td>dddd</td>
    </tr>
</table>