Tabbed Table

[Tuck]

<div align="center">
<a href="javascript: hideshow('HIDE_TABLE')">◄||►</a>
</div><br />

<table id="HIDE_TABLE" width="92%" cellpadding="4" cellspacing="1" align="center" class="bordercolor">
<tr>
<td width="5%" align="center" onClick='document.getElementById("maincon").innerHTML = document.getElementById("main").innerHTML' style="cursor: pointer;" bgcolor="#d6c4a6" onMouseOver="this.bgColor='#EEF0F1';" onMouseOut="this.bgColor='#d6c4a6';">
▲
</td>
<td width="45%" align="center" class="titlebg">
Title 1
</td>
<td width="45%" align="center" class="titlebg">
Title 2
</td>
<td width="5%" align="center" onClick='document.getElementById("maincon2").innerHTML = document.getElementById("main2").innerHTML' style="cursor: pointer;" bgcolor="#d6c4a6" onMouseOver="this.bgColor='#EEF0F1';" onMouseOut="this.bgColor='#d6c4a6';">
▲
</td>
</tr>
<tr>
<td width="1%" align="center" javascript:void(0) onClick='document.getElementById("maincon").innerHTML = document.getElementById("TITLE_1").innerHTML' style="cursor: pointer;" bgcolor="#D2DBD5" onMouseOver="this.bgColor='#EEF0F1';" onMouseOut="this.bgColor='#D2DBD5';">
Link 1
</td>
<td width="45%" height="100px" align="center" class="windowbg2" rowspan="3">
<div id="maincon">
Welcome To The Site!
</div>

<div id="main" style="display: none;">
Welcome To The Site!
</div>

<div id="TITLE_1" style="display: none;">
Content One
</div>

<div id="TITLE_2" style="display: none;">
Content Two
</div>

<div id="TITLE_3" style="display: none;">
Content Three
</div>

</td>
<td width="45%" height="100px" align="center" class="windowbg2" rowspan="3">

<div id="main2" style="display: none;">
Glad You Made It!
</div>

<div id="TITLE_4" style="display: none;">
Content FOUR
</div>

<div id="TITLE_5" style="display: none;">
Content FIVE
</div>

<div id="TITLE_6" style="display: none;">
Content SIX
</div>

<div id="maincon2">
Glad You Made It!
</div>

</td>
<td width="1%" align="center" javascript:void(0) onClick='document.getElementById("maincon2").innerHTML = document.getElementById("TITLE_4").innerHTML' style="cursor: pointer;" bgcolor="#D2DBD5" onMouseOver="this.bgColor='#EEF0F1';" onMouseOut="this.bgColor='#D2DBD5';">
Link 4
</td>
</tr>
<tr>
<td align="center" javascript:void(0) onClick='document.getElementById("maincon").innerHTML = document.getElementById("TITLE_2").innerHTML' style="cursor: pointer;" bgcolor="#D2DBD5" onMouseOver="this.bgColor='#EEF0F1';" onMouseOut="this.bgColor='#D2DBD5';">
Link 2
</td>

<td align="center" javascript:void(0) onClick='document.getElementById("maincon2").innerHTML = document.getElementById("TITLE_5").innerHTML' style="cursor: pointer;" bgcolor="#D2DBD5" onMouseOver="this.bgColor='#EEF0F1';" onMouseOut="this.bgColor='#D2DBD5';">
Link 5
</td>
</tr>
<tr>
<td align="center" javascript:void(0) onClick='document.getElementById("maincon").innerHTML = document.getElementById("TITLE_3").innerHTML' style="cursor: pointer;" bgcolor="#D2DBD5" onMouseOver="this.bgColor='#EEF0F1';" onMouseOut="this.bgColor='#D2DBD5';">
Link 3
</td>

<td align="center" javascript:void(0) onClick='document.getElementById("maincon2").innerHTML = document.getElementById("TITLE_6").innerHTML' style="cursor: pointer;" bgcolor="#D2DBD5" onMouseOver="this.bgColor='#EEF0F1';" onMouseOut="this.bgColor='#D2DBD5';">
Link 6
</td>
</tr>
</table>

<script type="text/Javascript">
<!--
function hideshow(id)
{
if(document.getElementById(id).style.display==""){
document.getElementById(id).style.display="none";
} else {
document.getElementById(id).style.display="";
}
}
//-->
</script>