Click a button to show or hide a table

Question

Please see the picture attached with this question. I have four tables with me. When I click certain table name (eg Table 1), I want that table to get displayed in the right hand side. When I click on some other table name, previous one should disappear and present one should be displayed.
I know only html. So, please tell me if this can be done alone with html. If not, I am allowed to use only CSS and JavaScript (I am new to both of these and will learn if they will be helpful, depending on your answer). If this can be achieved using only these 3 languages (viz HTML, CSS and JavaScript), please tell.

Answer 1

Here is the simplest way for you to start. It gives you an easy way to follow what's going on and how things works.

Also with this solution it's easy to add a server side code (asp/php) to deal with users who has javascript disabled.

Demo: http://jsfiddle.net/DEv8z/2/

Javascript

function show(nr) {
    document.getElementById("table1").style.display="none";
    document.getElementById("table2").style.display="none";
    document.getElementById("table3").style.display="none";
    document.getElementById("table4").style.display="none";
    document.getElementById("table"+nr).style.display="block";
}

CSS

td {
    vertical-align: top;
}
#table1, #table2, #table3, #table4 {
    display: none;
}

HTML

Other things goes here ... <br /><br />

<table>
    <tr>
        <td>
            <a href="#" onclick='show(1);'>Table 1</a>
            <br />
            <a href="#" onclick='show(2);'>Table 2</a>
            <br />
            <a href="#" onclick='show(3);'>Table 3</a>
            <br />
            <a href="#" onclick='show(4);'>Table 4</a>
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            <div id="table1"> Content of 1 </div>
            <div id="table2"> Content of 2 </div>
            <div id="table3"> Content of 3 </div>
            <div id="table4"> Content of 4 </div>        
        </td>
    </tr>
</table>

UPDATE

Using a file for each table would look like this:

table1.html

Other things goes here ... <br /><br />

<table>
    <tr>
        <td>
            <a href="table2.html">Table 2</a>
            <br />
            <a href="table3.html">Table 3</a>
            <br />
            <a href="table4.html">Table 4</a>
            <br />
            .....
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            Content of 1
        </td>
    </tr>
</table>

-----------------------------------------------------

table2.html

Other things goes here ... <br /><br />

<table>
    <tr>
        <td>
            <a href="table1.html">Table 1</a>
            <br />
            <a href="table3.html">Table 3</a>
            <br />
            <a href="table4.html">Table 4</a>
            <br />
            .....
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            Content of 2
        </td>
    </tr>
</table>

And if you can use server side includes and your "Other things...." will be the same for all tables, you can put that part in a separete file which gets injected with the each table content.