En vez de hacerlo con tablas usé un par de divs, les puedes poner estilos y te quedan igual o mejor que con tablas.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function show(id) {
document.getElementById('_'+id).style.display = 'block';
document.getElementById('img'+id).src = 'minus.gif';
document.getElementById('link'+id).href = 'javascript:hide('+id+')';
}
function hide(id) {
document.getElementById('_'+id).style.display = 'none';
document.getElementById('img'+id).src = 'plus.gif';
document.getElementById('link'+id).href = 'javascript:show('+id+')';
}
</script>
<style type="text/css">
.hide { display: none; }
</style>
</head>
<body>
<div><a style="cursor:hand" href="javascript:show('1')" id="link1"><img id="img1" src="images/plus.gif" width="10" height="10">Topic 1</a></div>
<div id="_1" class="hide">Information for Topic 1 here<br>
456454565</div>
<div><a style="cursor:hand" href="javascript:show('2')" id="link2"><img id="img2" src="images/plus.gif" width="10" height="10">Topic 2</a></div>
<div id="_2" class="hide">Information for Topic 2 here</div>
<div><a style="cursor:hand" href="javascript:show('3')" id="link3"><img id="img3" src="images/plus.gif" width="10" height="10">Topic 3</a>
<div id="_3" class="hide">Information for Topic 3 here</div>
</html> Lo probé en Opera, FF e IE, funciona en los tres ;)
Suerte,
Fede