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. There are videos on adding and styling DIVs and creating a navigation menu in my HTML and CSS YouTube playlist.
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?