Manage Learn to apply best practices and optimize your operations.

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.

Dig Deeper on J2EE for Lotus Notes Domino and WebSphere

SearchWindowsServer

Search400

  • Favorite iSeries cheat sheets

    Here you'll find a collection of valuable cheat sheets gathered from across the iSeries/Search400.com community. These cheat ...

  • HTML cheat sheet

    This is a really cool cheat sheet if you're looking to learn more about HTML. You'll find just about everything you every wanted ...

  • Carol Woodbury: Security

    Carol Woodbury

SearchDataCenter

SearchContentManagement

Close