tableTAB效果

< HTML >
< HEAD >
< script > ...
var Num=4;  //

< HTML >
< HEAD >
< script  language ="JavaScript1.2" > ...
// All Codez Modifed & Writen By Windy_sk,
// You Can Use It Freely , But You Must Hold This Item !

var Card_list = new Array();

function Cardz(title,content) ...{
this.title = title;
this.content = content;
}

//You can add the url list you wanted, format as below;

Card_list[0] = new Cardz("表单","<form action=''>性别：<input type=radio checked name=sex>男<input name='sex' type=radio>女<br>姓名：<input name='name'><br>工作：<select name='job'><option>待业</option><option>在学</option><option>工作</option></select><br><input type=submit><form>");
Card_list[1] = new Cardz("图片","<img src=http://www.agriffchina.com/pic/banner1.gif width=350 height=60>");
Card_list[2] = new Cardz("iFrame","<iframe style='filter:flipV()' src='http://www.sina.com.cn' width=400 height=90% marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=1></iframe>");
Card_list[3] = new Cardz("表格","<table border=1 width=100%><td>表格</td></tr><tr><td>111111111111</td></tr><tr><td>222222222222</td></tr></table>");
Card_list[4] = new Cardz("滚动字幕","<marquee> 滚动字幕 </marquee>");

var Num = Card_list.length;
var cur_card = 1;

function document.onmousedown()...{
var obj=event.srcElement
var pobj=obj.parentElement.id;
if(obj.className=="span")...{
for(i=1;i<=Num+1;i++)...{

if(pobj==("btn"+i))...{
document.all("td"+i).style.backgroundColor = "menu";
document.all("btn"+i).style.height = 20;
if(i!=cur_card)content(i)
cur_card = i;
}else...{
if(i<=Num)...{
document.all("td"+i).style.backgroundColor = "white";
document.all("btn"+i).style.height = 18;
}
}
}
} 
}


function content(i)...{
Content.innerHTML = Card_list[i-1].content
}

function init()...{
for(i=1;i<=Num;i++)
document.all("MenuName"+i).innerText = Card_list[i-1].title;
content(1);
}

</ script >

< style > ...
td{...}{font-size:9pt}
.span{...}{
cursor:default;
padding-left:5;
padding-top:2;
padding-right:5;
padding-bottom:0;
width:70px;
height:100%;
TEXT-ALIGN: center;
}
</ style >
< TITLE > Table_Card </ TITLE >
< META  http-equiv ="content-type"  content ="text/html;charset=gb2312" >
</ HEAD >
< BODY  bgcolor =#FFFFFF  onload =init() >
< p >
< table  width =0  align =center >< tr >< td >
< table  cellpadding =0  cellspacing =0 >
  < tr  height =20  onselectstart ="return false" >
< script  language ="JavaScript1.2" > ...
for(i=1;i<=Num;i++)...{
tdBody="<td valign=bottom>"
tdBody+="<table cellspacing=0 cellpadding=0 bgcolor='menu'>"
tdBody+="<tr>"
tdBody+="<td width=1 height=1></td><td width=1 height=1></td>"
tdBody+="<td bgcolor=white></td><td></td><td></td>"
tdBody+="</tr>"
tdBody+="<tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td>"
tdBody+="<td></td><td bgcolor=black></td><td></td>"
tdBody+="</tr>"
tdBody+="<tr><td width=1 bgcolor=white></td><td width=1 height=1></td>"
tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+">title</span></td><td width=1 bgcolor=gray></td><td bgcolor=black width=1></td>"
tdBody+="</tr>"
tdBody+="<tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=white id=td"+i+"></td>"
tdBody+="</tr>"
tdBody+="</table>"
tdBody+="</td>";
document.write(tdBody)
}
document.all("td1").style.backgroundColor = "menu";
document.all("btn1").style.height = 20;
</ script >
< td  style ="border-bottom:1 white solid"  width ="50" ></ td >
  </ tr >
</ table >
< div  style ="BACKGROUND-COLOR: menu;padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset" >
< span  id =Content > Content </ span >
</ div >
</ td ></ tr ></ table >
</ BODY >
</ HTML >

< html >

< head >
< title > window </ title >
< meta  http-equiv ="content-type"  content ="text/html;charset=gb2312" >

< style  type =text/css > ...
td {...}{ 
    font-size: 12px;
    font-family:arial;
    color: #000000;
    line-height: 150%;
    }
.sec1 {...}{ 
    background-color: #EEEEEE;
    cursor: hand;
    color: #000000;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid #FFFFFF
    }

.sec2 {...}{ 
    background-color: #E4EAF8;
    cursor: hand;
    color: #000000;
    border-left: 1px solid #FFFFFF; 
    border-top: 1px solid #FFFFFF; 
    border-right: 1px solid gray; 
    font-weight: bold; 
    }

.main_tab {...}{
    background-color: #E4EAF8;
    color: #000000;
    border-left:1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray; 
    }
</ style >

< script  language =javascript > ...
<!--  
  function secBoard(n)  ...{
    for(i=0; i<secTable.cells.length; i++)...{
      secTable.cells[i].className="sec1";
    }

    secTable.cells[n].className="sec2";

    for(i=0; i<mainTable.tBodies.length; i++)...{
      mainTable.tBodies[i].style.display="none";
    }

    mainTable.tBodies[n].style.display="block";
  }
//-->
</ script >

</ head >


< body >

   < table  border =0  cellspacing =0  cellpadding =0  width =549  id =secTable >
     < tr  height =20  align =center >  
       < td  class =sec2  width =10%  onclick ="secBoard(0)" > General Information </ td >
       < td  class =sec1  width =10%  onclick ="secBoard(1)" > Team </ td >
       < td  class =sec1  width =10%  onclick ="secBoard(2)" > Documentation </ td >
       < td  class =sec1  width =10%  onclick ="secBoard(3)" > Test Report </ td >
     </ tr >
   </ table >

   < table  border =0  cellspacing =0  cellpadding =0  width =549  height =240  id =mainTable  class =main_tab >
     < tbody  style ="display:block;" >  
       < tr >  
         < td  align =center  valign =top >   < br >   < br >  text  </ td >
       </ tr >
     </ tbody >
     < tbody  style ="display:none;" >  
       < tr >  
         < td  align =center  valign =top >   < br >
           < br >
          text1  </ td >
       </ tr >
     </ tbody >
     < tbody  style ="display:none;" >  
       < tr >  
         < td  align =center  valign =top >   < br >< br >    text2  </ td >
       </ tr >
     </ tbody >
     < tbody  style ="display:none;" >  
       < tr >  
         < td  align =center  valign =top >   < br >< br >    text3  </ td >
       </ tr >
     </ tbody >  
   </ table >
  </ body >
</ html >

这里是增加选项卡的数目
var carNum=2+Num
function document.onselectstart()
...{
var obj=event.srcElement 
if(obj.tagName=="SPAN")
...{
return false;
}
}
function document.onmousedown()
...{
var obj=event.srcElement
var pobj=obj.parentElement.id;
if(obj.className=="span")
...{
  for(i=1;i<carNum;i++)
  ...{
   if(pobj==("btn"+i))
   ...{
    document.all("td"+i).style.backgroundColor="green"
    document.all("btn"+i).style.height=20
    content(i)
   }
   else
   ...{
    document.all("td"+i).style.backgroundColor="white"
    document.all("btn"+i).style.height=18
   }
  }
} 
}
function content(i)
...{
//这里是菜单名
mnuItem(1,"第一项")
mnuItem(2,"图片世界")
mnuItem(3,"第三个内容")
mnuItem(4,"表格")
mnuItem(5,"滚动字幕")
//End
if(i==1)
...{
span1.innerHTML="<input type=radio checked name=a>男<input name=a type=radio>女<br>"
+"<input><br><input><br><input type=submit>"
}
if(i==2)
...{
span1.innerHTML="<img src=http://www.fnfnet.com/images/banner.gif width=250>"
}
if(i==3)
...{
span1.innerHTML="<h1>第三个内容</h1>"}
if(i==4)
...{
span1.innerHTML="<table border=1 width=100%><td>第四个内容，表格</td></tr>"
+"<tr><td>aaaaaaaa</td></tr>"
+"<tr><td>bbbbbbbb</td></tr>"
+"<tr><td>ccccccccc</td></tr></table>"
}
if(i==5)
...{
span1.innerHTML="<marquee>"
+"这是第五个内容"
+"啦啦..？</marquee>"
}
}
function mnuItem(i,con)
...{
document.all("MenuName"+i).innerText=con
}
</ script >
< style > ... td{...}{font-size:9pt}
.span{...}{
cursor:default;
padding-left:5;
padding-top:2;
padding-right:5;
padding-bottom:0;
width:100%;
height:100%;
color: yellow;
background-color: green;
}
</ style >
< TITLE ></ TITLE >
< META  http-equiv ="content-type"  content ="text/html;charset=gb2312" >
</ HEAD >
< BODY  bgcolor =FFFFFF  onload =content(1)  onselectstart ="return false" >
< p >
< table  width =0  onselectstart ="return false"  bgcolor =green  align =center >< tr >< td >
< table  cellpadding =0  cellspacing =0  onselectstart ="return false" >
   < tr  height =20 >
< td  valign =bottom >
   < table  cellspacing =0  cellpadding =0  bgcolor =green >
    < tr >
    < td  width =1  height =1 ></ td >< td  width =1  height =1 ></ td >
    < td  bgcolor =white ></ td >< td ></ td >< td ></ td >
    </ tr >
    < tr >< td  width =1  height =1 ></ td >< td  width =1  height =1  bgcolor =white ></ td >
    < td ></ td >< td  bgcolor =black ></ td >< td ></ td >
    </ tr >
    < tr >< td  width =1  bgcolor =white ></ td >< td  width =1  height =1 ></ td >
    < td  id =btn1  height =20 >< span  class =span  id =MenuName1 >    </ span ></ td >< td  width =1  bgcolor =gray ></ td >< td  bgcolor =black  width =1 ></ td >
    </ tr >
    < tr >< td  bgcolor =white ></ td >< td  colspan =4  height =1  bgcolor =green  id =td1 ></ td >
    </ tr >
   </ table >
</ td >
< script > ...
for(i=2;i<carNum;i++)
...{
tdBody="<td valign=bottom>"
tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=green>"
tdBody+="<tr>"
tdBody+="<td width=1 height=1></td><td width=1 height=1></td>"
tdBody+="<td bgcolor=white></td><td></td><td></td>"
tdBody+="</tr>"
tdBody+="<tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td>"
tdBody+="<td></td><td bgcolor=black></td><td></td>"
tdBody+="</tr>"
tdBody+="<tr><td width=1 bgcolor=white></td><td width=1 height=1></td>"
tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+">  </span></td><td width=1 bgcolor=gray></td><td bgcolor=black width=1></td>"
tdBody+="</tr>"
tdBody+="<tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=white id=td"+i+"></td>"
tdBody+="</tr>"
tdBody+="</table>"
tdBody+="</td>";
document.write(tdBody)
}
</ script >
</ td >
< td  style ="border-bottom:1 white solid"  width =50 >   </ td >   </ tr >
</ table >
< div  style ="padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset" >
< span  id =span1 ></ span > <!-- 这里是内容 -->
</ div >
</ td ></ tr ></ table >
</ BODY >
</ HTML >

< HTML >
< HEAD >
< script >
var Num = 4 ;   // 这里是增加选项卡的数目
var carNum = 2 + Num
function document.onselectstart()
... {
var obj=event.srcElement 
 if(obj.tagName=="SPAN")
 ...{
 return false;
 }
}
function document.onmousedown()
... {
 var obj=event.srcElement
 var pobj=obj.parentElement.id;
 if(obj.className=="span")
 ...{
  for(i=1;i<carNum;i++)
  ...{
   if(pobj==("btn"+i))
   ...{
    document.all("td"+i).style.backgroundColor="menu"
    document.all("btn"+i).style.height=20
    content(i)
   }
   else
   ...{
    document.all("td"+i).style.backgroundColor="white"
    document.all("btn"+i).style.height=18
   }
  }
 } 
}
function content(i)
... {
//这里是菜单名
 mnuItem(1,"第一项")
 mnuItem(2,"图片世界")
 mnuItem(3,"第三个内容")
 mnuItem(4,"表格")
 mnuItem(5,"滚动字幕")
//End
 if(i==1)
 ...{
 span1.innerHTML="<input type=radio checked name=a>男<input name=a type=radio>女<br>"
 +"<input><br><input><br><input type=submit>"
 }
 if(i==2)
 ...{
 span1.innerHTML="<img src=http://www.fnfnet.com/images/banner.gif width=250>"
 }
 if(i==3)
 ...{
 span1.innerHTML="<h1>第三个内容</h1>"}
 if(i==4)
 ...{
 span1.innerHTML="<table border=1 width=100%><td>第四个内容，表格</td></tr>"
 +"<tr><td>aaaaaaaa</td></tr>"
 +"<tr><td>bbbbbbbb</td></tr>"
 +"<tr><td>ccccccccc</td></tr></table>"
 }
 if(i==5)
 ...{
 span1.innerHTML="<marquee>"
 +"这是第五个内容"
 +"啦啦..？</marquee>"
 }
}
function mnuItem(i,con)
... {
 document.all("MenuName"+i).innerText=con
}
</ script >
< style > td ... {font-size:9pt}
.span ... {
 cursor:default;
 padding-left:5;
 padding-top:2;
 padding-right:5;
 padding-bottom:0;
 width:100%;
 height:100%;
 }
</ style >
< TITLE ></ TITLE >
< META http - equiv = " content-type "  content = " text/html;charset=gb2312 " >
</ HEAD >
< BODY bgcolor = FFFFFF onload = content( 1 ) onselectstart = " return false " >
< p >
< table width = 0  onselectstart = " return false "  bgcolor = menu align = center >< tr >< td >
< table cellpadding = 0  cellspacing = 0  onselectstart = " return false " >
   < tr height = 20 >
  < td valign = bottom >
   < table cellspacing = 0  cellpadding = 0  bgcolor = menu >
    < tr >
    < td width = 1  height = 1 ></ td >< td width = 1  height = 1 ></ td >
    < td bgcolor = white ></ td >< td ></ td >< td ></ td >
    </ tr >
    < tr >< td width = 1  height = 1 ></ td >< td width = 1  height = 1  bgcolor = white ></ td >
    < td ></ td >< td bgcolor = black ></ td >< td ></ td >
    </ tr >
    < tr >< td width = 1  bgcolor = white ></ td >< td width = 1  height = 1 ></ td >
    < td id = btn1 height = 20 >< span  class = span id = MenuName1 >    </ span ></ td >< td width = 1  bgcolor = gray ></ td >< td bgcolor = black width = 1 ></ td >
    </ tr >
    < tr >< td bgcolor = white ></ td >< td colspan = 4  height = 1  bgcolor = menu id = td1 ></ td >
    </ tr >
   </ table >
  </ td >
  < script >
for (i = 2 ;i < carNum;i ++ )
... {
 tdBody="<td valign=bottom>"
 tdBody+="<table cellspacing=0 cellpadding=0 bgcolor=menu>"
 tdBody+="<tr>"
 tdBody+="<td width=1 height=1></td><td width=1 height=1></td>"
 tdBody+="<td bgcolor=white></td><td></td><td></td>"
 tdBody+="</tr>"
 tdBody+="<tr><td width=1 height=1></td><td width=1 height=1 bgcolor=white></td>"
 tdBody+="<td></td><td bgcolor=black></td><td></td>"
 tdBody+="</tr>"
 tdBody+="<tr><td width=1 bgcolor=white></td><td width=1 height=1></td>"
 tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+">  </span></td><td width=1 bgcolor=gray></td><td bgcolor=black width=1></td>"
 tdBody+="</tr>"
 tdBody+="<tr><td bgcolor=white></td><td colspan=4 height=1 bgcolor=white id=td"+i+"></td>"
 tdBody+="</tr>"
 tdBody+="</table>"
 tdBody+="</td>";
document.write(tdBody)
}
</ script >
</ td >
< td style = " border-bottom:1 white solid "  width = 50 >   </ td >   </ tr >
</ table >
< div style = " padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset " >
< span id = span1 ></ span ><!-- 这里是内容 -->
</ div >
</ td ></ tr ></ table >
</ BODY >
</ HTML >

< html >
< head >
< title > 项目申报 </ title >
< STYLE  type ="text/css" > ...
body,td{...}{
    font-size:12px;
    color:#000000;
    background-color:threedface;
    vertical-align: middle;
}
.checkbox{...}{width:12px;height:12px;}
.cked{...}{
    margin:0px;padding:0px;width:100%;display:block;background-color:highlight;color:highlighttext;
}
.nock{...}{
    margin:0px;padding:0px;width:100%;display:block;
}
.tab    {...}{
            cursor:hand;
            border-top:solid thin white;
            border-right:solid thin gray;
            border-left:solid thin threedface;
            font-family:Verdana;
            font-size:10pt;
            text-align:center;
            font-weight:normal}

.selTab    {...}{    border-left:solid thin white;
            border-top:solid thin white;
            border-right:solid thin gray;
            font-size:10pt;
            font-weight:bold;
            text-align:center}
.td_no_bottom {...}{
            width:100%;
            height:100%;
            border-color:white;
            border-bottom:0}
.td_top_right {...}{
            width:100%;
            height:100%;
            border-color:white;
            border-bottom:0;
            border-left:0}
.td_no_left {...}{
            width:100%;
            height:100%;
            border-color:white;
            border-left:0}
.td_all {...}{
            width:100%;
            height:100%;
            border-color:white}
.title {...}{
            font-size:16px;
            font-weight:bold;}
 .tips {...}{
             background-color:transparent;
            border:0;
             color:#990000;
            font-size:14px;}
</ STYLE >
< script  LANGUAGE ="JavaScript" > ...

var menuItem=['1、申报基本信息','2、省技术创新项目申请表','3、技术创新项目立项建议书封面','4、项目开发的目的、意义及必要性','5、国际水平、现状及发展趋势','6、国内产品与技术发展水平、现状','7、项目前期研发及技术准备情况','8、项目产业化实施方案','9、项目进度安排与完成期限','10、技术经济指标','11、项目资金安排情况','12、进口设备仪器情况','13、社会、经济效益评价','14、项目承担单位及项目协作单位情况','15、其它需要说明的问题','格式及填写说明'];

var linkItem=['1.jsp','2.jsp','3.jsp','4.jsp','5.jsp','6.jsp','7.jsp','8.jsp','9.jsp','10.jsp','11.jsp','12.jsp','13.jsp','14.jsp','15.jsp','16.jsp'];
var col=0;

function init(c)
...{
    if(isNaN(c)) col=0;
    else col=Math.floor(c);
    win.innerHTML=public_Labels(menuItem);
    document.body.onclick=changeTabs;
    window.onresize=function()...{win.innerHTML=public_Labels(menuItem);}
}    

function public_Labels(labels)
...{
    var html="";
    var menus=[];
    var menu="";
    var base="";
    var bases=[];
    var row=0;
    var row_all=1;
    var j=0;
    var menu_len=0;
    var frame_height=0;

    menus[0]='</table><table width=100% CELLPADDING="0" CELLSPACING="0"><tr HEIGHT="20">';
    bases[0]='';

    for(var i=0;i<labels.length;i++)
    ...{
        menu_len+=labels[i].length;
        if(menu_len*22>document.body.scrollWidth) 
        ...{
            j++;
            menus[j]="</table><table width=100% CELLPADDING="0" CELLSPACING="0"><tr HEIGHT="20">";
            bases[j]="";
            menu_len=0;
            row_all++;
        }
        if(i==col)
        ...{
            menus[j]+="<td ID="t"+i+"" CLASS="selTab">"+labels[i]+"</td>";
            bases[j]+="<td ID="t"+i+"base" STYLE="height:2; border-left:solid thin white"></td>";
            row=row_all-1;
        }
        else
        ...{
            menus[j]+="<td ID="t"+i+"" CLASS="tab">"+labels[i]+"</td>";
            bases[j]+="<td ID="t"+i+"base" STYLE="height:2; background-color:white"></td>";
        }
    }

    for(var i=0;i<row_all;i++)
    ...{
        if(i!=row) menu+=menus[i]+" ";
    }

    menu+=menus[row];
    base=bases[row];

    frame_height=document.body.scrollHeight-row_all*22;
//    alert(document.body.scrollHeight);
    html+=("<table STYLE="width:100%; height:100%" CELLPADDING="0" CELLSPACING="0" bgcolor="#d4d0c7">");
    html+=( menu );
    html+=("  <tr>");
    html+=( base );
    html+=("  </tr>");
    html+=("</table>");
    html+=("<table width="100%" HEIGHT=""+frame_height+"" CELLPADDING="0" CELLSPACING="0">");
    html+=("  <tr>");
    html+=("    <td STYLE="border-left:solid thin white;border-bottom:solid thin white;border-right:solid thin white">");
    html+=("    <iframe frameborder=0 width='100%' height='100%' src='"+linkItem[col]+"'></iframe>");
    html+=("    </td>");
    html+=("  </tr>");
    html+=("</table>");
    return html;
}

function changeTabs()
...{

    if(window.event.srcElement.className == "tab")
    ...{
        col=window.event.srcElement.id.replace(/t/i,'');
        win.innerHTML=public_Labels(menuItem);
    }
}

</ script >
</ head >

< body  onload ="init()" >
< div  id ="win"  STYLE ="position:absolute; top:0; left:10; height:100%; width:100%; border:none thin gray" >
</ div >
</ body >
</ html >

< html >
< head >
< title >  New Document  </ title >
< style > ...
td      {...}{ font-family: 宋体; font-size: 9pt;}
.ooib {...}{ border-width: 1px; border-style: none solid solid; border-color: #CC3333; background-color: #E4E5EE;}
.ooih td {...}{ border-width: 1px; padding: 0 5; }
.ooihj {...}{ color: #CC3333; background-color: #E4E5EE; border-style: solid solid none; border-color: #CC3333; cursor: hand}
.ooihs {...}{ color: #6600CC; background-color: #ccccFF; border-style: solid; border-color: #6600CC #6600CC #CC3333; cursor: hand}
.ooihx {...}{ border-style: none none solid; border-color: #CC3333; }

</ style >
< script  language ="JavaScript" > ...
function ghbq(td)
...{
  var tr = td.parentElement.cells;
  var ob = obody.rows;
  for(var ii=0; ii<tr.length-1; ii++)
  ...{
    tr[ii].className = (td.cellIndex==ii)?"ooihj":"ooihs";
    ob[ii].style.display = (td.cellIndex==ii)?"block":"none";
  }
}
</ script >
</ head >

< body >

< table  class ="ooih"  border ="0"  cellspacing ="0"  cellpadding ="0"  width ="400"  height ="19" >
   < tr >
< td  class ="ooihj"  nowrap onclick ="ghbq(this)" > 标签一 </ td >
< td  class ="ooihs"  nowrap onclick ="ghbq(this)" > 标签二 </ td >
< td  class ="ooihs"  nowrap onclick ="ghbq(this)" > 标签三 </ td >
< td  class ="ooihs"  nowrap onclick ="ghbq(this)" > 标签四 </ td >
< td  class ="ooihx"  width ="100%" > &nbsp; </ td >
   </ tr >
</ table >
< table  class ="ooib"  id ="obody"  border ="0"  cellspacing ="0"  cellpadding ="0"  width ="400"  height ="300" >
   < tr >
     < td >
标签内容一
     </ td >
   </ tr >
   < tr  style ="display: none" >
     < td >
标签内容二
     </ td >
   </ tr >
   < tr  style ="display: none" >
     < td >
标签内容三
     </ td >
   </ tr >
   < tr  style ="display: none" >
     < td >
标签内容四
     </ td >
   </ tr >
</ table >

</ body >
</ html >