Question

I know that using tables in html as part of the layout is bad practice, and so would like to know how to style the example you can see here using the <ul> element instead of a table. All spacings and font sizes need to remain the same.

Any help would be much appreciated.

Answer 1

This is how I would do it:

(The idea is to use the box-sizing property in order to be able to set width: 25% safely.)

HTML:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS:

#nav {
    font-size: 20px;
}

#nav li {
    border-left: 1px solid #C3C3C3;
    float: left;
    width: 25%;
    text-align: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#nav li:first-child {
    border: none;
}

#nav a {
    display: block;
    color: inherit;
    text-decoration: none;
}

Live demo: http://jsfiddle.net/dLBYe/8/