how to hide table when html page opens

Question

Hallo there I have some javascript code allowing for a table to be visible when my mouse passes over a link and to hide when my mouse moves out. The problem I have is to have the table 'hidden' when the page opens. How could I achieve this. This is my code for the hiding and showing of the table.

<li  onmouseout="hideMenu('families')" onmouseover="showMenu('families')" ><a href="#">Five Families</a>
                <table class="slideDownOne" id="families" width="120px" border="1px" cellpadding="5px 0px 5px 0px">
                    <tr><td><a href="#">Gambino</a></td></tr>
                    <tr><td><a href="#">Genovese</a></td></tr>
                    <tr><td><a href="#">Colombo</a></td></tr>
                    <tr><td><a href="#">Bonnano</a></td></tr>
                    <tr><td><a href="#">Luchhese</a></td></tr>
                </table>
            </li>   

and this is some javascript code i used for the hiding and the showing of the table

<script language="javascript">  
        function showMenu(elmnt)
        {
            document.getElementById(elmnt).style.visibility="visible";
        }
        function hideMenu(elmnt)
        {
            document.getElementById(elmnt).style.visibility="hidden";
        }   


    </script>   

regards Arian

Answer 1

You need to apply the same CSS you are applying via JavaScript to the table itself:

#families { visibility:hidden }

or, using inline CSS:

<table style="visibility:hidden" class="slideDownOne" id="families" width="120px" border="1px" cellpadding="5px 0px 5px 0px">
...
</table>

Note that by using the visibility property, the element will still take up space in the document. If you don't want that, you need the display property instead:

#families { display:none }

Answer 2

Use style.display="none" and style.display="block".