Tabbed tables as rendered for the Web by Domino are pretty much a waste of time - basically they look terrible. If you've tried it, you'll know exactly what I mean. Never fear, however - include the code given here on a Domino form, and watch as tabbed tables become recognizable as... well, tabbed tables.
FIRST, A FEW COMMENTS
The code below is written to support IE5+. I can pretty much guarantee it will require modification to work properly with Netscape.
A before-and-after example of the code may be found at:
http://members.ozemail.com.au/~jjrogers/tabs.html
USING THE CODE
The first thing you need to do, is pick an image to serve as the tab background. My sample image is available at: http://members.ozemail.com.au/~jjrogers/tabs.html. This image may be stored in your database as an image resource. If you're using a different image, you'll probably want to change the image name and tab height and width specified in the code below.
After this, there are two steps to applying the code. Firstly, include the following in the HTML Head Content of the form with which you're dealing:
"<style>" +
" /* properties for the tabs themselves */ " +
" div table tr td table tr td { " +
" border:none; " +
" border-width:1; " +
" background-image:url(tabimage.jpg); " +
" width:90px ;" +
" height: 22px;" +
" } " +
" /* formatting for text on the non-current
Requires Free Membership to View
Register today to access targeted resources from our editorial writers and independent industry experts focused on Lotus Domino, Notes, Workplace and other related technologies.
tab text */ " +
" div table tr td table tr td a { " +
" color:black; " +
" font:8pt Arial; " +
" text-decoration:none;" +
" }" +
" /* formatting for mouseover on the non-current tab text */ " +
" div table tr td table tr td a:HOVER { " +
" color:black; " +
" font:8pt Arial; " +
" text-decoration:underline;" +
" }" +
" /* formatting for the current tab text */ " +
" div table tr td table tr td b { " +
" color:black; " +
" font:8pt Arial; " +
" font-weight: bold; " +
" }" +
" /* formatting for the table that contains the tabs */ " +
" div table tr td table { " +
" border-width:0; " +
" }" +
"</style>"
Next, put a <div> tag immediately before the tabbed table on the form, and a </div> tag after it. Mark these tags as pass-thru HTML, of course.
That's it. Again, a before-and-after example of this may be found at:
http://members.ozemail.com.au/~jjrogers/tabs.html
A BRIEF DISCUSSION
The overall intention here was to provide a means by which the tabbed tables available in Domino could be practically used, with a minimum of overhead in initial development, and more particularly in maintenance.
CSS is used to provide the formatting, and contextual selectors are used to determine which elements are subject to this formatting. The <div> tags are used to limit the page elements to which the formatting is applied. However, if there you have tables within tabbed tables, you might encounter some unwanted application of styles, unless you apply alternative formatting explicitly to those elements.
This was first published in November 2001