Table Attributes for a Menu for all Browsers - Nesting Table Cell Attributes
(Page 4 of 4 )
Here is an illustration of one of the nesting tables and its nested table:
Fig. 14.1
This set of tables is displayed when the mouse pointer goes over the menu item named “Sub link 21 >” of the second drop down menu. The dash lines indicate the nesting table. The nesting table has three cells. The table for the sub menu proper is in the bottom-most cell.
The cellpadding of the nesting table is zero. This means that the padding value for each of the three cells is zero, so the nested table just fits into the bottom-most cell. Well, the cellpadding and cellspacing of the nested table are each zero; the reason for this is for consistency with the other tables for sub menus.
Now the presence of the border always adds to the size (width) of the table or cell. With the situation just described above, the width of the nesting table is smaller than the width of the nested table, since the nested table has a border.
This can cause problems. In order to avoid any such problem, the cell padding value of the first two cells of the nesting table is 1px. This compensates for the border width of 1px for the nested table. The table tags for these two cells are:
<tr><td width="175" style="padding:1px"> </td></tr>
<tr><td width="175" style="padding:1px"> </td></tr>
The table row elements (TR) are for the nesting table. Just note that each of these table cells has been given an effective width equal to the width of its table.
Other Attributes
Each cell of the main menu (horizontal bar) has an onmouseover event. We have already seen the use of this. Each cell for a drop down or sub menu has an onclick event and an onmouseover event. We shall see the reasons for this when we begin talking about the JavaScript code.
Remark
If you do not want a border for the menu items, then give the table cells a border width of 0px. In this case the rules attribute is not needed. From my experience, most users prefer to see some form of demarcations for menu items. The table (cells) border is the easiest way to achieve this (in this series).
At this point it is a good idea to look at the layout and configurations of the tables of the code you downloaded in part ten of my earlier series on a common browser menu, before you continue. If you did not download the code in part ten of that series, then download it now from this link:
versatileCommonMenu.ZIP
We have finished with the layout and configuration of the tables. In the next part we shall begin the JavaScript code. The explanation will not be as long as the one for the previous series. Now we will take a break until the next part.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
