<HTML>
<HEAD><!---Code by LISA CASSLEY--->
<basefont face="Verdana, Arial, Helvetica" size="2" color="#000000">
<TITLE>Nested Tables</TITLE>
<BASE TARGET="_top" />
<script language="Javascript" type="text/javascript">
function ToggleScopeCat(sScope)
{
var oTable = document.all["tbl" + sScope];
if (oTable && oTable.style.display == "block")
{
oTable.style.display = "none";
}
else
{
oTable.style.display = "block";
}
}
</script>
</HEAD>
<BODY TOPMARGIN="10" LEFTMARGIN="20" MARGINHEIGHT="0" MARGINWIDTH="0"
background="images/bg.gif"
TEXT="#000000" style="text-align: left">
<!-- Begin Content -->
<!-- This is the overall table it displays the first first level, but keeps the rest of the
rows invisible -->
<table id="tblScopeCats" cellpadding="0" border="1" bordercolor="#000000"
cellspacing="0"
height="50" width="528" bordercolorlight="#808080" style="border-collapse:
collapse">
<tr style="padding:1px" onClick="javascript: ToggleScopeCat('lib');">
<td width="132" align="center" colspan="1">level1</td>
<td width="132" align="center">test11</td>
<td width="132" align="center">test12</td>
<td width="132" align="center">test13</td>
</tr>
<table>
<table id="tbllib" height="75" width="524" border="1" cellpadding="0"
cellspacing="0"
style="display:none; border-collapse: collapse" bordercolorlight="#808080">
<tr onClick="javascript: ToggleScopeCat('lib2');">
<td width="131" align="center" style="padding:3px">level2</td>
<td width="131" align="center">test21</td>
<td width="131" align="center">test22</td>
<td width="131" align="center" valign="middle">test23</td>
</tr>
<!-- This table row holds the third level table -->
<tr>
<td colspan="4">
<table style="display:none; border-collapse:collapse; border: 1px inset
#000000;" id="tbllib2" cellpadding="4" cellspacing="0" height="85"
width="524">
<!-- This table row displays the header of the table "Notes"-->
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
</table>
<!-- This ends the third table -->
</td>
</tr>
<!-- This table row displays some of the values of the variables from the
recordset -->
<tr onClick="javascript: ToggleScopeCat('lib3');">
<td width="131" align="center" style="padding:3px">level2</td>
<td width="131" align="center">test21</td>
<td width="131" align="center">test22</td>
<td width="131" align="center" valign="middle">test23</td>
</tr>
<!-- This table row holds the third level table -->
<tr>
<td colspan="4">
<table style="display:none; border-collapse:collapse; border: 1px inset
#000000;" id="tbllib3" cellpadding="4" cellspacing="0" width="524">
<!-- This table row displays the header of the table "Notes"-->
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
</table>
<!-- This ends the third table -->
</td>
</tr>
</table>
<!-- This ends the second table -->
</td>
</tr>
</table>
<!-- This ends the first table -->
<!-- End Content -->
</BODY>
</HTML>
Tidak ada komentar:
Posting Komentar