Place this code between the head section of the page.
<script type="text/javascript">
function showHide(id) {
if (document.getElementById(id).style.display == "none") {
document.getElementById(id).style.display = '';
}
else {
document.getElementById(id).style.display = "none";
}
}
</script>
Then place this in the body of the page:
<a href="#" onclick="showHide('test1'); return false;">Hide Table 1</a>
<a href="#" onclick="showHide('test2'); return false;">Hide Table 2</a>
<a href="#" onclick="showHide('test3'); return false;">Hide Table 3</a>
<table id="test1" border="1">
<tr>
<td>This is table 1</td>
</tr>
</table>
<table id="test2" border="1">
<tr>
<td>This is table 2</td>
</tr>
</table>
<table id="test3" border="1">
<tr>
<td>This is table 3</td>
</tr>
</table>
Hope this helps.