CSS/HTML: What is the "right" way to create this effect?

I'm working on a website for a small law office. There's a menu bar across the top that I want to be equi-spaced with a | between each item: Link. (The white bar just below the title banner)

This looks exactly right, but I'm using tables to accomplish it. Is there a "more correct" method for doing this with XHTML/CSS?

My code is below:

<div id="topMenu" class="spanningMenu">
        <table>
            <tr>
                <td class="topMenuEnd"></td>
                <td class="topMenuMiddle"><a href="index.htm">Home</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="contact.htm">Contact Us</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="directions.htm">Directions</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="disclaimer.htm">Disclaimer</a></td>
                <td class="topMenuEnd"></td>
            </tr>
        </table>
    </div>

And the CSS:

.spanningMenu {
    border-style: solid;
    border-width: 4px 0px;
    padding: .2em;
}

#topMenu td.topMenuMiddle {
    width: 12.5%;
}

#topMenu td.topMenuEnd {
    width: 6.25%;
}

I like my solution because it's pret开发者_Python百科ty robust, but it definitely has layout information in the HTML, which I've been trying to avoid.

Okay, Tables for layout is wrong, tables for MENUS is just perverse...

Please please please read this

You should be doing this:

HTML:

<ul>
    <li>Item1 |</li>
    <li>Item2 |</li>
    <li>Item3</li>
</ul>

CSS:

ul li {
    float:left;
    margin-left:5px;
}

http://jsfiddle.net/Mutant_Tractor/wyQFb/

I've just hacked something together to give you an idea. It's a method I always use. You can adjust the width to suit your needs. Here's a fiddle : http://jsfiddle.net/pfkgw/

#menu {
    background:#ECD8B1;
    overflow:auto;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    padding: 5px 0px;
}
ul li {
    width: 24%;
    border-right:1px solid #000;
    float:left;
    text-align:center;
}

ul li.last {
    border-right:none;
}

li a {
    display:block;
    padding:5px;
    color:#000;
}

<div id='menu'>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Contact Us</a></li>
        <li><a href='#'>Directions</a></li>
        <li class='last'><a href='#'>Disclaimer</a></li>
    </ul>
</div>

It is generally accepted that a navigation bar is a list of links, so it should be in <ul></ul> tags.

I would not include the pipe character | because that is also presentational. You can add it in the CSS using li:after { content: "|"; } or by adding a CSS border attribute.

For information on styling up lists horizontally, check out Listamatic.

Try this:

<style type="text/css">
#menu { width: 100%; }
#menu a { display: block; float: left; width: 20%;
border-right: 1px solid #000; text-align: center; }
#menu a.last { border-right: 0px solid #000; clear: both; }
</style>

<div id="menu">
<a href="/">Link 1</a>
<a href="/">Link 2</a>
<a href="/" class="last">Link 3</a>
</div>