Afficher une balise html à la place d'une autre

Bonjour.

Ci-dessous mon code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table id="premier">
        <tr>
        <td>oneTest</td>
                <td> contenu1 </td>             
            </tr>       
            <tr>
                <td>twoTest</td>
                <td>contenu2</td>              
            </tr>
            </table>
<table id="deuxieme" style="visibility:hidden">
            <tr>
            <td>autreTest</td>
             <td>encoreTest   </td> 
           </tr> </table>
<input type="button" value="Suivant" onclick="suivant()" />

Ci-dessous mon code JavaScript:

Code:

1
2
3
function suivant() {
document.getElementById("premier").style.visibility = "hidden";
            document.getElementById("deuxieme").style.visibility = "visible";}

Mais, le deuxième tableau apparaît en dessous du premier tableau qui a disparu.

Comment faire, s'il vous plaît, pour que le deuxième tableau apparaisse à la place du premier tableau qui a disparu, c'est-à-dire non pas en dessous, mais au même niveau (comme s'il s'agissait StackPanel) ?

Merci.

<table id="premier"> <tr> <td>oneTest</td> <td> contenu1 </td> </tr> <tr> <td>twoTest</td> <td>contenu2</td> </tr> </table> <table id="deuxieme" style="display:none;"> <tr> <td>autreTest</td> <td>encoreTest </td> </tr> </table> <input type="button" value="Suivant" onclick="suivant()" />