Home arrow HTML arrow Table Attributes for a Menu for all Browsers

Table Attributes for a Menu for all Browsers

In previous parts of this series, we discussed the style and ID attributes of the menu's tables. As I said, a lot of the design in this series lies in the configuration of the tables. In this part of the series, we have to talk about the other attributes. This is the last part where we shall talk about table configuration. Attributes affect the characteristics (nature) of a table.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
May 27, 2009
  1. · Table Attributes for a Menu for all Browsers
  2. · Attributes of the Drop Down Menu Tables
  3. · Attributes of the Second Drop Down Menu
  4. · Nesting Table Cell Attributes

print this article

Table Attributes for a Menu for all Browsers
(Page 1 of 4 )

The Main Menu Attributes

The main menu is the horizontal bar. The cellpadding of this table is zero. The cellspacing is zero. The border width for the table cells is 1px. So, apart from the border size, all that you see on the table is the content of the cells. 

Cellpadding and cellspacing values are browser dependent. Keeping these values at zero gives consistency between browsers.

The width of the table is 900px. In this series, do not forget to give table widths and cell widths. The start tag of this table is as follows:

<table cellpadding="0" cellspacing="0" border="1" width="900">

Attributes for the Main Table for Sub Menus

The cell spacing and the cell padding for this table are each zero for the same reasons given above. The border width for the tables for the drop down menu will be 1px. If we give this main table (the cells) a border width, then the border widths of the drop down menus will be thicker than the border widths of the cells of the main menu (above it). This would lead to misalignment between the cell widths of the main menu and the widths of the drop down menus.

Remember that the widths of the drop down menus have to be the same as the widths of the corresponding cells of the main menu. Do not confuse the main menu of the horizontal bar with the main table holding the sub menus (including the drop down menus). The start tag of this table is:

<table id="MT"cellpadding="0" cellspacing="0" border="0" width="900" style="position:absolute; z-index:10; display:none">

The only attribute in the cells of this table is that of the width. They are as follows:



<tr><td width="125"></td><td width="200"></td><td width="250"></td><td width="200"></td><td width="125"></td></tr>



If you add all these numbers you will have 900, equal to the width of the main menu table. Note that the drop down menus are the contents of the above cells.

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