In this example, I had several "control" fields on a form. These fields serve as indicators for the workflow process. I was working with limited screen real estate and wanted a way to make the workflow controls very evident and allow the user to rapidly navigate through them. It was at this point that I struck on the idea of creating a fixed width caption table that could hold these fields. I liked this concept very much, since it provides a separate "container" for each of the controls. By offsetting the fields from one another, the user is free to focus on one element at a time, which was important in this application because we wanted them to think about the choices they were making for each workflow option. The end result was a nice UI element that proved to be very usable...a win-win combo.
Here's what it looks like in action:
If you've not used a caption table before, it's quite easy. When you create a new table, specify the number of rows and columns and then choose the "Caption Table" option. The number of rows corresponds to the number of accordion sections that you will have, with each section containing the specified number of columns.
Most of the standard formatting properties for tables still apply with a caption table. To add the caption labels, use the "Special Row Options" tab of the table properties dialog. This process is very similar to setting up the labels for a tabbed table.
That's about all there is to it. For far more inspiring design uses of this UI feature, a quick search on Google will probably turn up some nice examples. If you want to do the same thing on the web, look no further than Rico, which provides a very nice and easy to use accordion effect (I use Rico as an example in one of my Lotus Developer2006 sessions).
For some additional caption table goodness, check out the following posts from Ben and William.
Ben Langhinrichs - SNTT: Accordion style views in Lotus Notes client
William Beh - Lotus Notes Categorized View using Rico Accordion