Table Attributes for a Menu for all Browsers - Attributes of the Second Drop Down Menu
(Page 3 of 4 )
There is an outer table here with one row of three cells. When the mouse pointer goes over the second menu item on the main menu, this table is displayed. The cell spacing and the cell padding for this table are each zero for the same reasons given earlier.
The table border (cell) width is 0px. Recall that the tables that you see in this case are inside this table. The tables that you see have borders (cell borders). So if you give this table cell borders, the resulting border for a table displayed will be thicker than the corresponding borders of the cell in the main menu. This would lead to poor alignment. The width of this table is 525px.
The first cell of this table has a width of 200px, the second has a width of 175px and the third has a width of 150px. If you add these values, you will have 525px. Each of these cells would have a table whose width is equal to the width of its containing cell.
The attributes of the table in the first cell have the same meanings as the attributes of the ordinary drop down menu tables. However, remember that the value of the display property is always "block." So, whenever the outer table is displayed, this table is also displayed; whenever the outer table is removed, this table is also removed. This is the start tag of the table:
<table cellpadding="0" cellspacing="0" border="1" rules="rows" width="200" style="position:absolute; display:block">
As explained in the previous part, there are two tables in the center cell of the outer table. The value of their display property is initially "none." When you want to see any tables, you change this value to "block."
The cellpadding and cellspacing of either nesting table is zero, for the same reasons as mentioned earlier. The table border (cells) of either nesting table is 0px thick (see reasons below). There is no rules attribute here (see reasons below). So, the borders of the cells are not to be displayed.
There is a width property. The width value is equal to that of its containing cell of the outer table. These are the start tags of these two nesting tables for the center cell:
<table cellpadding="0" cellspacing="0" border="0" width="175" id="ST11" style="position:absolute; display:none">
<table cellpadding="0" cellspacing="0" border="0" width="175" id="ST21" style="position:absolute; display:none">
Each of these tables has a nested table, which is actually the sub menu. The cellpadding and cellspacing of either nested table is zero, for the same reasons as mentioned earlier. The table's (cells) border width is 1px. These are the sub menus proper, so the borders of the menu items should be seen. If the nesting table has table (cells) borders, then there will be alignment problems as I explained earlier.
Note that we have quite a good number of tables without borders; this is to prevent alignment problems. Since they are the menus proper, these nested tables have the rules property with the value "rows." The width of a table is equal to the width of the nesting table, which is equal to the width of the containing cell. These are the start tags for the two corresponding nested tables:
<table cellpadding="0" cellspacing="0" border="1" rules="rows" width="175">
<table cellpadding="0" cellspacing="0" border="1" rules="rows" width="175">
They are the same. Neither of them has the position and display property. This is because each of them is a nested table, glued to the nesting table; each of them would appear when the nested table appears. For this reason, neither of the tables has an ID and does not need to be addressed by the JavaScript.
In the fourth cell of the main table, there are two tables. One is a drop down menu table. The other is the sub menu table produced by the fifth drop down menu. These are the start tags of the drop down and sub menu tables:
<table cellpadding="0" cellspacing="0" border="1" rules="rows" id="DDT4" width="125" style="position:absolute; display:none">
<table cellpadding="0" cellspacing="0" border="0" width="200" id="ST34" style="position:absolute; display:none">
With everything I have explained, you should be able to explain the meaning of the attributes. I will give you the complete code later on.
Next: Nesting Table Cell Attributes >>
More HTML Articles
More By Chrysanthus Forcha
