Making tabbed tables work on the Web

Tabbed tables as rendered for the Web by Domino are pretty much a waste of time - basically they look terrible.

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 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

Dig deeper on J2EE for Lotus Notes Domino and WebSphere

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchWinIT

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchEnterpriseLinux

SearchVirtualDataCentre.co.UK

Close