How to Create a Horizontal Navigation Bar Using Tables and Divs

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.

Instructions

Set Up the Table

1

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:

"

row 1, cell 1

row 1, cell 2

row 1, cell 3

row 1, cell 4

row 1, cell 5

"
2

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:

"

Choosing a Puppy

Raising a Puppy

Feeding a Puppy

Grooming a Puppy

Puppy Health

"
3

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:

"

"

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

Use Divs to Style Your Navigation Bar

4

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;

5

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:

"

Choosing a Puppy

Raising a Puppy

Feeding a Puppy

Grooming a Puppy

Puppy Health