htmlcsscss-tablescorrectness

Is the HTML <table> tag improper or incorrect to use for navigation bars?


I posted some code below that makes a very basic navigation bar for a website. It uses a table for layout and CSS for spacing. However, I am not sure if this is considered the "best" way.

Is it incorrect to use <table> for something other than, say, a periodic table of elements or other data?

Thank you so much!

HTML Code

<table class="navigation">
                        <tr>
                            <td>Home</td>
                            <td>About</td>
                            <td>Products</td>
                            <td>Store</td>
                            <td>Contact</td>
                        </tr>
                    </table>

CSS Code

.navigation {
    margin: 0 auto;
    background-color: transparent;
    color: #666666;
    border-spacing: 60px 10px;
    letter-spacing: 2px;
}

Solution

  • Some might disagree, but I would say yes. It's definitely incorrect to use a table for a nav bar. Here's why; Your HTML is your mark up, it's basically supposed to be used to describe what's happening on a page. Using a table in this context would be purely for aesthetic purposes, which is the job of CSS.

    The done thing, and the option that makes most sense to most people, is using an unordered list and throwing a few list items in there to create your nav bar, like so:

     <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Products</li>
            <li>Store</li>
            <li>Contact</li>
        </ul>
    </nav>
    

    See how everything is being described here rather than specifying a format? We're saying; "in this Nav, there's a list. In this list there are a few items." - from that alone we would be able to guess that the list items within the Nav tag would probably be nav links (when the a tags are added).

    Check out w3 schools HTML for this kind of info, they go into it a lot better than most of us are willing/able to.