HTML - ocultar y mostrar div o elemento

buenas tengo una serie de cartas ya hice varios intentos en una tabla y en 2 tablas distintas, oculte un elemento de html utilizando la propiedad none y hidden probe con las dos, lo que pasa es que al darle ocultar y mostrar con javascript la carta que se oculta deja el espacio no lo ocupa entonces la carta siguiente toma ese lugar y se desordenan todas, se puede poner las cartas fijas? es decir para que no se muevan aca dejo los codigos

CODIGO JAVASCRIPT
<script type="text/javascript">

function mostrar(){
document.getElementById('naipe4').style.display = 'block';}

function ocultar(){
document.getElementById('naipe0').hidden = true;}




CODIGO HTML
<table border="1" align="center" width="100px" height="600px" bordercolor="black" cellspacing="0" cellpadding="0" id="tabla">

<tr>


<td class="carta" id=naipe0 type="button" value="" onclick="ocultar(); mostrar()" align="center">
<img src="https://www.forotarot.net/consultas/tiradaespañola/pic1/carta.png" width="80px" height="100px">
</td>



</tr>
<tr>

<td>
<div class="carta" id=naipe4 type="button" value="" onclick="" align="center" >
<img src="https://lacajadepandra.files.wordpress.com/2015/12/espadas-002.jpg" width="80px" height="100px">
</div>
</td>

</tr>

<tr>

<td class="carta" id=naipe7 type="button" value="" onclick="" align="center">
<img src="https://lacajadepandra.files.wordpress.com/2015/12/espadas-002.jpg" width="80px" height="100px">
</td>

</tr>
<tr>

<td class="carta" id=naipe10 type="button" value="" onclick="" align="center">
<img src="https://lacajadepandra.files.wordpress.com/2015/12/espadas-002.jpg" width="80px" height="100px">
</td>


</tr>
</table>

Hola,

creo que entiendo tu problema... Lo que debes hacer es ocultar el contenido del <td>, no el <td> en general, por eso se desestructura toda la tabla..

Mira de añadir las funciones de mostrar y ocultar de javascript al <img> de dentro del <td> y a ver si te funciona ;)