Developing Domino 7 Web Applications

Create Better Looking Tables for Web Browsers and Internet Mail

Domino converts tables to the Table HTML tag. Some of the properties for a table and the table's cells are converted to the equivalent tags for web browsers. However, many of the table settings are not converted. This can result in a table that looks great in the Notes client but looks very different on the web. This affects not only Domino applications used with a web browser but also internet mail sent by a Notes client to other mail systems like Outlook or Yahoo that use MIME formatting.

Below is an image of a table created and displayed in the Notes client. This table's properties are also shown. Note that the Row and Column spacing were used to provide a "margin" in the table cells.

Below is the same table as rendered by a Domino server for display in a web browser (converted to HTML). Note how the empty row which was added for spacing has not maintained the same row height as the other rows. Also note that the lines around each cell are no longer the thin black line but are a thick gray line.

Quarter	Sales
1Q,2006	$10,000
2Q,2006	$15,000
Totals	$35,000

The following table from Lotus Domino Designer Help lists which table properties are NOT supported on the web.

Table Layout properties
Column spacing	This property is not supported in Web applications, but may affect the Width property of a cell, which is supported on the Web.
Minimum height
Row spacing
Table Width	"Same as window" setting is ignored in a Web application.
Cell Borders properties
Color	Color settings for cell borders are not supported on the Web
Cell Border Style	The style options, Ridge and Groove, are not supported on the Web.
Cell Border Thickness	Border thickness settings greater than 1 are not supported.
Table/Cell Background properties
Style	Solid is the only color option supported on the Web. Gradients will appear as the first color.
Table Borders properties
Border style	Determined by individual cell borders.
Border color	The table color is used.
Border effects	Width is not supported.
Thickness
Table Margins properties
Left
Right
Table wrap
Compatibility
Table Rows properties
Show only one row at a time	"Switch rows every n milliseconds" and "transitions" are not supported.

How to Improve Tables on the Web?

Use CSS (Cascading Style Sheets) to improve the appearance of Domino tables when displayed on the web. CSS does not affect the appearance of a table when viewed by the Notes client, only in a web browser. The following techniques are described in this tip:

1. Add a Table Style
2. Add a Style to each cell in the table
3. Add HTML to define padding around the contents of each cell
4. Add HTML to properly show empty cells

1. Add a Table Style

As the following image shows, the Table Style is added in the Table Programming tab in the Table properties dialog:

The Table Style defines the border (solid), border color (black), and a border width of 2 pixels. The border-collapse defines if the adjacent cells are merged (collapsed) to avoid having a cell with multiple borders in that same cell which results in a border that is much wider than the desired 2 pixels. This style will add a black border around the outside of the table.

The table with the above Table Style looks like the following:

Quarter	Sales
1Q,2006	$10,000
2Q,2006	$15,000
Totals	$35,000

2. Add a Style to Each Table Cell

As the following image shows, CSS can also be added to each cell to control the cell borders inside the table.

The Cell Style is similar to the Table Style. The border-collapse is not needed for the inside cells.

The table with the Table Style and Cell Style (applied to each cell) looks like the following:

Quarter	Sales
1Q,2006	$10,000
2Q,2006	$15,000
Totals	$35,000

3. Add HTML to Define Padding around the Contents of Each Cell

To add spacing around each cell's contents use the cellpadding attribute. The value here is in pixels.

Quarter	Sales
1Q,2006	$10,000
2Q,2006	$15,000
Totals	$35,000

4. Add HTML to Properly Show Empty Cells

Finally, to display the same height for an empty row add a non-breaking space using pass-thru HTML. %nbsp is the HTML code to show a non-breaking space. As the following image shows, HTML code can be selected and specified as pass-thru HTML by choosing Pass-Thru HTML on the Text menu:

The completed table now appears as the following in a web browser:

Quarter	Sales
1Q,2006	$10,000
2Q,2006	$15,000
Totals	$35,000

There are many other CSS attributes that can be used to control the appearance of tables. Consult the CSS2 Reference for the complete specification:

http://www.w3.org/TR/REC-CSS2/

Saving Time with CSS Identifiers

It can be tedious to add a CSS style for every cell in a table. An easier way is to define a CSS style in the HTML header of the document and then simply assign the table an identifier. Below is an image of a form's design showing the HTML Head Content. A CSS style is defined for HTML objects that use the identifier of myTable. A second style is used to affect the table columns (TD) that are in a table with the identifier of myTable. Note the use of the # sign to signify the identifier. If the identifier was not used then all tables on the form would be affected by this style (which may or not be desired!)

To use this in a table put the identifier name into the table's properties:

This technique produces the same results as shown above but with a lot less work!

Quarter	Sales
1Q,2006	$10,000
2Q,2006	$15,000
Totals	$35,000