The menu across the top is easy to create - the one down the side was a little more fiddly (and doesn't appear in IE8) because of positioning, but they use the same basic principle - the <div> is small with the content hidden, and then it expands to show the content when the mouse is moved over it.
Many web designers frown upon the use of tables for laying-out pages - it went out of fashion in the early noughties.
Tables are OK for tables of information, but for other things it's better to use floating <div>s.
Tables are very rigid, and don't cope well with screens of different sizes and shapes.
Using <div>s is much more flexible. You don't know that the person looking at your page is using a computer, you don't know how wide their screen is, and they might be using a screen - such as a phone or a tablet - that is taller than it is wide.
Resize your browser window so that it is too narrow to fit these two boxes side by side - what happens?