Design choice for top_nav_bar in web application(HTML)

Pretty simple question.

Its just some a开发者_StackOverflow中文版dvice based on personal opinion and best practice. It's difficult to explain so I'll draw the best image I can. Try to imagine that I have any old website and at the very top I have a navigation bar which is broken into 3 rows.

Top is application: Settings, Profile, Login/Out Second is notification: Error, new message Third is part navigation part functional.

So we have 3 rows supporting different functionality and obviously different color schemes. Each on is no more than about 5% of the total pages height.

I supposed the question I'm asking is whats the best way to do this.

First guess was to use tables to format the data and space them out:

This worked, but It looks sloppy.

{
    border-collapse: collapse;
    border-spacing: 0;
}

seems to fill in any gaps in the table but it doesn't look right

Second guess was to use frame sets:

Shot myself a dirty look for even thinking of it

Third guess was to keep everything css and Html

Which seems like the most sensible one next to tables but keeping content organized with the multiple buttons and such sounds like it could be trouble.

Lastly

was use a JQuery or javascript UI library. This presents It's own set of problems but could be the prettiest if done right.

So if it was you, how would you go about doing this simple task and why?

picture of view as requested. Part in question is top nav

http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=globalview.jpg

Don't use tables for this purpose.

Only use tables for tabular data (which this isn't).

Just use divs for the containers and lis for the menus.

EDIT

This is somewhat like I would do:

http://jsfiddle.net/uf2zU/1/

This uses elements what they are meant for.

And can be easily controlled using CSS.

EDIT 2

http://jsfiddle.net/uf2zU/4/

I would go about this using sets of HTML uls and CSS, because that's the most forward thinking, plus it uses HTML the way it should be. However, if you want to use tables, try border: none; and border-collapse: collapse;

I would go with the third guess for the presentation part, because that's the most flexible part, at least for me. If you split up all the sections correctly, then the task of managing the content will become quite easy, because you will be able to target the section and style anything with it.

In addition, I would go with the last option (i.e. vanilla JavaScript and jQuery), for client side functionality, because that's the Swiss Army Knife of DOM manipulation.

A horizontal nav bar just that -- a horizontal entity. Therefore, I wouldn't "stack" elements as rows, rather as columns. It's the difference between a huge header and something that's visually much easier to comprehend. Stretch your elements out, use icons, whatever. If you have the need to be really verbose, go with a giant menu

I personally use JQuery UI Tabs whenever possible because they're a well-established UI pattern, are easy to deploy, and automatically "Ajax Load" my pages. Sure, you get a few "gotchas" but they're nothing for a competent jQuery user to overcome.

In situations where I can't use UI Tabs, I will do a pure CSS bar across the top, "floating" via absolute positioning if that is what the client specs. Layout is no place for Tables (they are for tabular content elements) and you're right that frames have no place, period. This shouldn't be any more difficult than basic page layout, so it's a no-brainer to go this route.

For notification, there are other options that are more obvious and timely. Try the Notification Widget or StackOverflow style notifications All other small, basic info could be contained on your horizontal bar.