What Are Tabular Nav Bars?

A Nav Bar is simply a formatted list of links used for web site navigation. A "tabular" nav bar is laid out using HTML tables. Below is an example:

There are several advantages to using a table to organize and layout your links. First, you can use a background separate from the default background of your page. I used black in the example above.

Longer text links can be broken into two or more lines making these links the same width as the others. This is what I did with "Link #3". Overall, the centering of each link in it's cell gives a crisp, professional look not available by just making a plain line of text links.

The table above was coded using the following simple table code. Note that I just used a colored style for the text instead of an actual link.

<table width="100%" cellspacing=0 cellpadding=5 border=0>

<td width="20%" align="center" bgcolor="#000000">
<span style="color: #ff0000">Link #1</span>
</td>

<td width="20%" align="center" bgcolor="#000000">
<span style="color: #ff0000">Link #2</span>
</td>

<td width="20%" align="center" bgcolor="#000000">
<span style="color: #ff0000">Big Long<br>Link #3</span>
</td>

<td width="20%" align="center" bgcolor="#000000">
<span style="color: #ff0000">Link #4</span>
</td>

<td width="20%" align="center" bgcolor="#000000">
<span style="color: #ff0000">Link #5</span>
</td>

</table>

Using CELLSPACING

We can make our tabular nav bar look more like buttons by using an appropriate value in the table's CELLSPACING attribute.

In our current example, lets raise the CELLSPACING from zero to 10. This will add some blank space between our table's cells and make them look more like buttons. Here's the code in the <table> tag:

<table width="100%" cellspacing=10 cellpadding=5 border=0>

The CELLSPACING will produce the tabular nav bar below:

Making Vertical Nav Bars

Vertical nav bars are made by putting each cell between <tr> tags, thus making a column instead of a row:

The big thing to note here is that the <table>'s WIDTH sets the overall width of the column in this case. This WIDTH was 100% in the horizontal nav bar example. It is only 20% for this vertical nav bar. In practice, the width would probably be set by a parent layout table that has a column coded just for links as seen in our previous lesson.

The table making the vertical nav bar would use a WIDTH of 100% to stretch all the way across this column. The use of 100% in a "nested" table causes it to stretch across it's parent element, not the entire page.

Here a section of the <table>'s code. Notice that the only big difference is that each cell is enclosed in <tr> tags to make a new row.

<tr><td width="20%" align="center" bgcolor="#000000">
<span style="color: #ff0000">Link #1</span>
</td></tr>

Exercises

Try making both horizontal and vertical nav bars using tables. Use different sized CELLSPACING to see the different effects.

To Next Advanced HTML Lesson

Back To Advanced HTML Index