ColdFusion in Context: Tabbed Folders
Many Microsoft applications gather related options in a "folder" and have you click on a tab to select the folder you want to work with. Suppose you want to emulate that functionality in a Web page. One way to go about it is to combine a table with a style sheet. Use table cells as tabs, override the usual link appearance with a style sheet so clicking on the tab text will seem like selecting a folder, and color the cells for the tabs and folder body appropriately to give the feeling of folders in a file drawer. Here's how.
Build a Style Sheet for Links
The idea is to use links in the tabs without having the words wind up underlined or change color after a visit. A style sheet can override these characteristics. This style sheet defines what links ("a": the anchor tag) should look like in two modes: idle and hover. Setting text-decoration to none keeps links from being underlined. When the mouse is not on a link, it will be black and bold. When the mouse hovers over a link, its color will change, but it will retain the characteristics not explicitly changed. It will remain bold and not underlined. The page for each tab should start with this code.
<style>
a {text-decoration:none;color:black;font-weight:bold;}
a:hover {color:blue;}
</style>
Build the First Tab
The convention of folders in a file cabinet is represented here by a table having multiple cells in its first row and a single cell spanning the table in its second row. The second row can of course have as many lines of text and controls as desired and can even use nested tables for formatting. The cell of the top row that represents the tab for THIS folder should be the same color as the body of the folder: the second row. The other cells should have slightly different colors so they don't merge with the body or with each other. The usual space between cells should also be removed. The cellspacing control does this for Internet Explorer; the border control is added to accommodate Netscape Navigator as well.
A word about colors is in order. David Sanders points out that HTML hex colors are controlled by three pairs of hex characters: a pair for red, a pair for green, and a pair for blue. Thinking of them this way will help you make small adjustments when your reference chart isn't handy.
Add this code to the previous code and save it as tab1.cfm.
<table cellspacing="0" border="0">
<td bgcolor="#EDEDED"><a href="tab1.cfm">Tab 1</a></td>
<td bgcolor="#CCCCCC"><a href="tab2.cfm">Tab 2</a></td>
<td bgcolor="#A9A9A9"><a href="tab3.cfm">Tab 3</a></td></tr>
<tr><td colspan="3" bgcolor="EDEDED"><br>
This information is displayed when you select Tab 1.
</td></tr>
</table>
Change a Copy for the Second and Third Tabs
Make a copy of tab1.cfm, rearrange the colors to put the body color in the middle, and call the result tab2.cfm. The tab code will look like this. Don't forget to change the text in the body as appropriate.
<td bgcolor="#CCCCCC"><a href="tab1.cfm">Tab 1</a></td>
<td bgcolor="#EDEDED"><a href="tab2.cfm">Tab 2</a></td>
<td bgcolor="#A9A9A9"><a href="tab3.cfm">Tab 3</a></td></tr>
Do it one more time and call the result tab3.cfm. The tab code will look like this.
<td bgcolor="#CCCCCC"><a href="tab1.cfm">Tab 1</a></td>
<td bgcolor="#A9A9A9"><a href="tab2.cfm">Tab 2</a></td>
<td bgcolor="#EDEDED"><a href="tab3.cfm">Tab 3</a></td></tr>
Review and Refine
To see the result, browse any of these files and click tabs to move between them, then imagine how the effect could be better. Some colors (purple, for example), tend to shrink away from others and therefore may not work well in this context; however, you certainly don't need to stick with gray tones. Images would be nice and can be joined to text using style sheets so clicking on the image or the text would select the page. Use this interface with ColdFusion controls; drive it with a database to automatically generate tabbed folders for your top five sales items. Enjoy! =Marty=