Home arrow HTML arrow Configuring Tables for a Menu for All Browsers

Configuring Tables for a Menu for All Browsers

In this third part of the series, we continue with the style attributes of the tables of the menu. After that we shall talk about the IDs of the tables and the IDs of their cells. As I said in the previous part of the series, a lot of the design in this series lies in the configuration of the tables. We just have to carry on talking about the tables. We shall talk relatively little about the JavaScript code, later in the series.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
May 20, 2009
  1. · Configuring Tables for a Menu for All Browsers
  2. · Sub Menu for Last Drop Down Menu
  3. · IDs of the Tables and their Cells
  4. · The Last Drop Down Menu Table IDs

print this article

Configuring Tables for a Menu for All Browsers
(Page 1 of 4 )

Having Two Menu Tables in a Cell of the Outer Table

Notice that in the second drop down menu, there are two menu items with the > character. The sub menu in the center cell, that we talked about, corresponds to the first > in the drop down menu.

Remember that this center cell has a table nesting in another, and that these two tables form a sub menu. In order to display or remove the sub menu, you have to change the value of the display property of the nesting table.

There is another pair of tables like this, still in this center cell. We have not talked about this before. This pair forms the sub menu corresponding to the second > character in the drop down menu. This is its outline:

Fig 13.1

The nesting table for fig 13.1 has three rows, and the first two rows (cells) each have the   character. The last row has the nested table, which has two rows, each of which has an A element.

So you have two nesting tables in the center cell of the one-row outer table. The initial and default value for each of the nesting tables is "none." Under this condition, neither of the nesting tables occupy space in the center cell.

Only one of these nesting tables can be displayed at a time. In other words, only one of their values for the display property should be set to "block" at a time. The one whose value is set to "block" occupies space in the center cell, while the other one does not take up any space. You will have the complete code later.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials