• Lesson Index:
• Introduction
• Table Tab Menu
• Overview
• Table Structure
• Cross Browser Issues
• Hover Effect
• Replacing Tab Image
• Remove Bottom Border
• Duplicating the Pages
• Javascript Rollover
• RollOver Images
• Examine the Code
• JS with CSS-class
• Use Single Image
• CSS Rollover Buttons
• CSS Hover Rollovers
• Use Single Image

Table Tab Menu: Creating the Menu Table Structure

Our table menu is going to have three tabs: 1) Welcome, 2) Services, and 3) Contact. Each tab is 90px wide (as determined by the tab image width) and we are going to have a 5px space between them.

Start by adding a table with id "tabmenu" into our header div as shown below. We set cellspacing and cellpadding to zero. There are five table cells: 3 cells for the tabs and 2 cells in between them as separators. We label the td's for the tabs with class="tab". We label the td's for the separators with class="separator".

We put links into the tab cells. We will implement the tab images as background images later

Now we add the CSS rules for the class tab and the class separator. Add the code as indicated below to the style section of the HTML.

From the width of the tab images, we know that the tab will be 90px. So we make the td table cell be width 90px. The CSS rule

table#tabmenu td.tab

means to apply the property of the rule to td elements of class tab that are inside a table tag of id tabmenu.

This is what we get...

View Live Code

Placing the Background Images

Add the tab images as background images to the tab cells...

And we get ...

Because we had not set a height to the menu table, the table will only be as high as needed based on its content. But from the size of the tab image, we know that we want the tab menu to be 23px high. So we set the height of the menu table now...

Tab Text

Now to stylize the tab text. Or more precisely, we stylize the tab link text under the a selector.

The selector

table#tabmenu td.tab a

selects elements <a> elements that are inside td's of class tab that are in turn inside table's of id tabmenu. And it sets the elements to the properties shown.

We set the tab link text to be Verdana 12px bold of color #993300. We want the hand cursor to appear not only when the user hovers over the link text, but to appear whenever the user hovers over any portion of the tab. To have this happen, we must force the link to take up the full width of the table cell. The property display: block will do this. Similarly, we want the link to take up the full height. Since the height of the table cell is 23px, we make the line-height to be 23px.

And we get ...

Menu Placement

We add a top and left margin to the menu table to push it down from the top edge and away from the left edge...

And we get...

View live code here

Looks good right? Not so fast. Did you check this in all the major browser? If you check the page in Safari or Opera, you will see a problem. We look into that in the next lesson.

Next Lesson: