ayuda con un javascript y tablas

Hola buenas, ¿que tal?

Estoy aqui intentando armar una pagina con textos ocultos, ocultados por un javascript al hacer click y dentro de uno de los textos que se ocultan me gustaria poner una tabla, la primera linea una tabla doble y en la segunda otra doble, o una de cuatro con un solo nombre en lugar de dos.

Bien, empecemos por el javascript:

Código:

<script language="javascript" type="text/javascript">
        function muestra(nombrediv) {
                if(document.getElementById(nombrediv).style.display == '') {
                                document.getElementById(nombrediv).style.display = 'none';
                } else {
                                document.getElementById(nombrediv).style.display = '';
                }
        }
</script>

Este codigo no lo he escrito yo, si sabeis alguna forma mejor que sea "compatible" con la tabla que quiera poner. No he estudiado programación web por lo que cualquier surgerencia o ayuda se agradece.

Aqui un ejemplo del codigo que estoy intentando hacer funcionar:

Código:

<ol>
	<li>
		<a href="javascript:;" onClick="muestra('texto')";>Mostrar / Ocultar - Texto
			<div style="display:none" id="texto">
				<br>
				<a href="javascript:;" onClick="muestra('columnas')";>Mostrar / Ocultar - Columnas
					<br>
					<div style="display:none" id="columnas">
						<br>
						<a href="javascript:;" onClick="muestra('columna')";>
							<table>
								<tr>				
									<th colspan="4" scope="col">
										Columna A | Columna B
									</th>
								</tr>
								<div style="display:none" id="columna">
									<br>
									<tr>
										<td>
											<a href="http://url">
												<img src="images/icons/icon-1.png" border="0"></img>
											</a>
										</td>
										<td>
											<a href="http://url">
												<img src="images/icons/icon-2.png" border="0"></img>
											</a>
										</td>
										<td>
											<a href="http://url">
												<img src="images/icons/icon-1.png" border="0"></img>
											</a>
										</td>
										<td>
											<a href="http://url">
												<img src="images/icons/icon-2.png" border="0"></img>
											</a>
										</td>
									</tr>									
								</div>
							</table>
						</a>
					</div>
				</a>
			</div>
		</a>
	</li>
</ol>

Esto si lo he escrito yo.

Lo que me gustaria hacer, esque la primera linea de la tabla fuera el link que oculta al resto de la tabla, ¿se entiende?

╔═══════════╦═══════════╗
║ Columna una ║ Columna dos ║ <-- Este seria el link
╠═════╦═════╬═════╦═════╣
║ icon1 ║ icon2 ║ icon1 ║ icon2 ║ <-- Mostrar estos iconos cuando se pinche en el link
╚═════╩═════╩═════╩═════╝

¿Eso se puede hacer? ¿Lo estoy haciendo bien?

La estructura seria: <a><div><a><div><a><table>y dentro de esta <div> para que se aplique el formato de la tabla con los iconos.

¿Hay otra forma de que coincidan los iconos sin usar una tabla?

El problema está en que "muestra('columna')" actua como si fuera muestra('columnas'). Probarlo y vereis el problema.

Gracias!!

salu2
dew

Edito: Estoy probando aver si esque he cerrado mal o algo. Editare el codigo para que se vea mejor.
Sin la tabla se oculta uno detras de otro sin problemas.