How to Create a Horizontal Navigation Bar Using Tables and Divs

Save

While tables are no longer recommended for Web design because they load slower, some designers prefer their dependability and ease of setup. You can use tables and divs to create a horizontal navigation bar. The tables also allow you to insert images instead of just words, so you can insert a graphic navigational button.

Set Up the Table

  • Create the table by first setting up the border with one table row and five table columns. This example has five columns, but designers can add more or less, depending on your website's needs. The code will look like this:

    "<table border="1">

    <tr>

    <td>row 1, cell 1</td>

    <td>row 1, cell 2</td>

    <td> row 1, cell 3 </td>

    <td>row 1, cell 4 </td>

    <td>row 1, cell 5 </td>

    </tr>

    </table> "

  • Write the names of the subpages or subdomains in the table data. For example, if your website is about dogs, the navigational bar will have information, such as "raising a puppy," "choosing a puppy," "feeding a puppy," "grooming" and puppy health." The code will look like this:

    "<table border="1">

    <tr>

    <td>Choosing a Puppy</td>

    <td>Raising a Puppy</td>

    <td>Feeding a Puppy </td>

    <td>Grooming a Puppy </td>

    <td>Puppy Health </td>

    </tr>

    </table> "

  • Insert images if you do not want plain text. If you have an image creator, you can use it to make original images that will then look like buttons in the navigation bar. To insert the images, attach the image source address inside the table data sections. For example:

    "<table border="1">

    <tr>

    <td><img src="&lt;/td">http://www.mynewpuppy.com/images/choosingpuppybutton.jpg">&lt;/td>"

    And so on, for the rest of the table data information.

Use Divs to Style Your Navigation Bar

  • Create a second document that will have the CSS div commands. You can use div tags to change the color, alignment and size of the table. An example of CSS commands for the table above would look like this:

    tborder {

    Background color:#FFFFFF;

    color: #445534;

    border: 2px;

            }

    trow{

    align: center;

    width: 10px;

    height: 5px;

        }

    tdata {

    align: center;

    text: 12px;

       }
  • Assign divs to the HTML style sheet. Go back to the HTML sheet where you created the table. Assign the divs to your table. The new code will look something like this:

    <div id="tborder">

    "<table border="1">

    <div id="trow">

    <tr>

    <div id="tdata">

    <td>Choosing a Puppy</td>

    <td>Raising a Puppy</td>

    <td>Feeding a Puppy </td>

    <td>Grooming a Puppy </td>

    <td>Puppy Health </td>

    </div>

    </tr>

    </div>

    </table>

    </div> "

    Notice that a new div is inserted just before the next HTML tag. So the table data div, "tdata," is inserted just before the first table data html tag, "<td>."

  • Save the HTML sheet and style sheet. Upload both onto your website's server with the cPanel (control panel).

  • View the webpage and make sure that the navigational bar is displaying correctly. You may have to adjust the width and height a few times to get it to fit just the way you want.

Tips & Warnings

  • Make sure to use an external style sheet instead of an embedded one. It makes updating the CSS a lot easier.
  • Tables might take longer to load on a Web browser.

References

  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet

Comments

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!