树型结构显示

在网页上这样显示

代码如下

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > Tree </ title >
< script  language ="javascript" >
function show(IMG,DV)
{
    if(DV.style.display=="none")
    {
        DV.style.display="block";
        IMG.src="images/btnDel.gif"
    }
    else
    {
        DV.style.display="none";
        IMG.src="images/btnAdd.gif"        
    }
}
var display="none";
var i;
function showall()
{
    var divTags=document.getElementsByTagName("div");
    //alert(divTags[10].id.replace("DV",""));
    if( display=="none" )
    {
        for(i=0;i<divTags.length;i++)
        {
            divTags[i].style.display="block";
            eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnDel.gif";
            display="block"
        }
    }
    else
    {
        for(i=0;i<divTags.length;i++)
        {
            divTags[i].style.display="none";
            eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnAdd.gif";
            display="none";
        }
    }
}
</ script >
</ head >

< body >
   < table  width ="90%"   border ="1"  align ="left"  bordercolorlight ="#cccccc"  bordercolordark ="#ffffff"  cellpadding ="0"  cellspacing ="0" >
     < tr  ONCLICK ='showall()'  align ="center"  STYLE ='CURSOR:HAND'  onMouseOver ="this.bgColor='#eeeeee'"  onmouseout ="this.bgColor='#ffffff'" >
       < td  width ="21%"  bgcolor ="#EEEEEE" > 表头 </ td >
       < td  width ="23%" > 123456 </ td >
       < td  width ="17%"  bgcolor ="#EEEEEE" > 其他内容 </ td >
       < td  width ="39%" > 123456 </ td >
     </ tr >
   </ table >
     < p > &nbsp; </ p >
     < table  width ="45%"   border ="1"  bordercolorlight ="#cccccc"  bordercolordark ="#ffffff"  cellpadding ="0"  cellspacing ="0" >
     < tr  align ="center"  ONCLICK ="show(IMG001,DV001)"  STYLE ='CURSOR:HAND'  onMouseOver ="this.bgColor='#eeeeee'"  onmouseout ="this.bgColor='#ffffff'" >
       < th  width ="2%"  scope ="row" >< img  id ="IMG001"  src ="images/btnAdd.gif" ></ th >
       < td  width ="20%"  bgcolor ="#EEEEEE" > 第一层 </ td >
       < td  width ="25%" > 456789 </ td >
       < td  width ="30%" > 12 </ td >
       < td  width ="20%" > 221 </ td >
     </ tr >
     </ table >
     <!-- Begin of 2 -->
             < DIV  id ='DV001'  style ='display:none'>
             <table style ="margin-left: 20px;"  width ="65%"  border ="1"  bordercolorlight ="#cccccc"  bordercolordark ="#ffffff"  cellpadding ="0"  cellspacing ="0" >
           < tr  align ="center"  ONCLICK ="show(IMG0010,DV0010)"  STYLE ='CURSOR:HAND'  onMouseOver ="this.bgColor='#eeeeee'"  onmouseout ="this.bgColor='#ffffff'" >
             < td  width ="2%" >< img  id ="IMG0010"  src ="images/btnAdd.gif" ></ td >
             < td  width ="10%"  bgcolor ="#EEEEEE" >  第二层 </ td >
             < td  width ="10%"   > 132 </ td >
             < td  width ="8%" > 12 </ td >
             < td  width ="20%" > &nbsp; </ td >
             < td  width ="8%"   ></ td >
             < td  width ="20%"   > &nbsp; </ td >
             < td  width ="10%"   ></ td >
           </ tr >
         </ table >
             <!-- Begin of 3 -->
                 < DIV  id ="DV0010"  style ='display:none'>
                  <table style ="margin-left: 40px;"  width ="75%"  border ="1"  bordercolorlight ="#cccccc"  bordercolordark ="#ffffff"  cellpadding ="0"  cellspacing ="0" >
                   < tr   STYLE ='CURSOR:HAND'  onMouseOver ="this.bgColor='#eeeeee'"  onmouseout ="this.bgColor='#ffffff'"  align ="center"  ONCLICK ='show(IMG00101,DV00101)'>
                     <td width ="2%"  bgcolor ="#eeeeee" >< img  id ="IMG00101"  src ="images/btnAdd.gif" ></ td >
                     < td  width ="10%"  bgcolor ="#eeeeee" > 第三层 </ td >
                     < td  width ="15%"   > &nbsp; </ td >
                     < td  width ="10%"   > &nbsp; </ td >
                     < td  width ="10%"   > &nbsp; </ td >
                     < td  width ="10%"   > &nbsp; </ td >
                     < td  width ="10%"   > &nbsp; </ td >
                     < td  width ="10%"   > &nbsp; </ td >
                     < td  width ="10%" > &nbsp; </ td >
                   </ tr >
                 </ table >
                             <!-- Begin of 4 -->
                                 < DIV  id ='DV00101'  style ='display:none'>
                                 <table style ="margin-left: 60px;"  width ="90%"  border ="1"  bordercolorlight ="#cccccc"  bordercolordark ="#ffffff"  cellpadding ="0"  cellspacing ="0" >
                                   < tr  align ="center" >
                                     < td  width ="2%"  bgcolor ="#eeeeee" >< img  id ="IMG001010"  src ="images/btnDel.gif" ></ td >
                                     < td  bgcolor ="#eeeeee"  width ="10%" > 第四层 </ td >
                                     < td > &nbsp; </ td >
                                     < td > &nbsp; </ td >
                                     < td > &nbsp; </ td >
                                     < td > &nbsp; </ td >
                                     < td > &nbsp; </ td >
                                     < td > &nbsp; </ td >
                                     < td > &nbsp; </ td >
                                     < td > &nbsp; </ td >
                                   </ tr >
                                   </ table >
                   </ DIV > <!-- End of 4 -->

             </ DIV > <!-- End of 3 -->

             </ DIV > <!-- End of 2 -->

</ body >
</ html >

这里给出的是静态网页,还有没有其他更好的方法?
如果是动态的话,如何去分页?