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


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:


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; " +
"      }" +


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:


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

There are Comments. Add yours.

TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
Sort by: OldestNewest

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:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.