要实现这样一个关于table的效果，需要帮忙

这里假设有三个table ，最外层是一个大的div,然后每个table嵌套在一个div中， 效果是这样:   开始三个table只有tr[0]中的内容是显示的，并且三个tr[0]是纵向排列，然后当鼠标移动到一个tr[0]上，对应的其它列也分别显示,这些列在响应tr[0]的右侧，但是要求是：！！ tr[1]同tr[0] 在同一行，而其它的tr在tr[1]的下方，并且鼠标要可以移动到每个tr下面的td，因为它们都是link ,并且字体是"white"！！!!!注意IE同FireFox的区别很大   我实现了最初的效果，请各位在goTable()函数中帮忙完善:
jsp:
  <body>
  <form>
<div id="total">   
<div id="home"><a href="view.jsp" id="homeLink">home</a></div>
<div id="1"><table id="t1" title="1"><tbody>
                    <tr><td><a href="view.jsp">1</a></td></tr>
                    <tr><td><a href="view.jsp">2</a></td></tr>
                    <tr><td><a href="view.jsp">3</a></td></tr>
                    <tr><td><a href="view.jsp">4</a></td></tr>
                    </tbody></table></div>
<div id="2"><table id="t2" title="2"><tbody>
                    <tr><td><a href="view.jsp">5</a></td></tr>
                    <tr><td><a href="view.jsp">6</a></td></tr>
                    <tr><td><a href="view.jsp">7</a></td></tr>
                    <tr><td><a href="view.jsp">8</a></td></tr>
                    </tbody></table></div>   
<div id="3"><table id="t3" title="3"><tbody>
                    <tr><td><a href="view.jsp">9</a></td></tr>
                    <tr><td><a href="view.jsp">10</a></td></tr>
                    <tr><td><a href="view.jsp">11</a></td></tr>
                    <tr><td><a href="view.jsp">12</a></td></tr>
                    </tbody></table></div>
</div>  
  </form>
</body>
js:
   function totalDiv()
{
 var div=document.getElementById("total");
 div.style.position="absolute";
 div.style.backgroundColor="black";
 div.style.width="50px";
 div.style.height="250px";
 
 var l=document.getElementById("homeLink");
 l.style.color="white";
}function link()
{
 var h=document.getElementById("home");
 h.style.position="relative";
 h.style.top="10px";
 h.style.left="10px";
 h.style.width="10px";
 h.style.height="0px";
}function div1()
{
 var d=document.getElementById("1");
 d.style.position="relative";
 d.style.top="80px";
 d.style.left="30px";
 d.style.height="0px";
 d.style.width="100px";
 d.style.visibility="hidden";
}
function div2()
{
 var d=document.getElementById("2");
 d.style.position="relative";
 d.style.top="120px";
 d.style.height="0px";
 d.style.left="30px";
 d.style.width="100px";
 d.style.visibility="hidden";
}function div3()
{
 var d=document.getElementById("3");
 d.style.position="relative";
 d.style.top="160px";
 d.style.height="0px";
 d.style.left="30px";
 d.style.width="100px";
 d.style.visibility="hidden";
}

function iniTable()
{
 var t=document.getElementsByTagName("table");
 for(var i=0;i<t.length;i++)
  {
   
    t[i].setAttribute("width","0");
    t[i].setAttribute("border","0");
    t[i].setAttribute("cellspacing","0");
    setTable(t[i],i+1);
  }
}
function setTable(table,id)
{
  var tb=table.tBodies[0];
  
  
  var tr=tb.getElementsByTagName("tr");  
  tr[0].style.visibility="visible";
  tr[0].cells[0].firstChild.style.color="white";
  var div=document.getElementById(id);
  
  tr[0].onmouseover = function()
   {
    table.style.backgroundColor="royalblue";
    goTable(table);  
    for(var i=1;i<tr.length;i++)
      {
       tr[i].style.backgroundColor="royalblue";
       tr[i].cells[0].firstChild.style.color="red";
       tr[i].style.visibility="visible";
      }
      
    
   }
   
  tr[0].onmouseout = function()
   {
    for(var i=1;i<tr.length;i++)
      tr[i].style.visibility="hidden";
   } 
  
  div.onmouseover = function()
   {
    table.style.visibility="visible";
    
   }
  
  div.onmouseout = function()
   {
    for(var i=1;i<tr.length;i++)
      tr[i].style.visibility="hidden";
     table.style.visibility="hidden";
    tr[0].style.visibility="visible"; 
   } 
  
}//modify here 
function goTable(table)
{
  
  var tb=table.tBodies[0];
  var tr=tb.getElementsByTagName("tr");
  table.style.display="inline";
  table.cellpadding="0";
  
  tr[0].style.display="inline";
  
  
  tr[1].style.position="relative";
  tr[1].style.left="20px";
  tr[1].style.display="inline";
  
  tr[2].style.position="relative";
  tr[2].style.left="20px";
  
  
  tr[3].style.position="relative";
  tr[3].style.left="20px";
}感谢帮忙!!!