Let's say you have a form, with a table, and the form is used on both the Notes client and the web browser. How can you make "nice" borders appear for both environments? The way Domino generates HTML, the table borders are either on or off. You can use style sheets to force borders on the web, but not in Notes (at least not in R5). So how do you make it look nice in both the Notes client and the web browser?

First, you have to decide what you want. Let's say that you want a table of 3 columns and 5 rows. You want a bottom border only on the rows - no side borders. So it should look like this picture. That's easy to do in Notes: you just create the table, turn the left and right borders to 0, turn the bottom border to 0, and you're all set. But when you preview that on the web, there are borders around every cell - all 4 sides. That's not what you want.

The reason for the borders on the web is the way Domino generates HTML. HTML tables either have all borders on (a border on every side of every cell) or all borders off - no other options exist in basic HTML. The border settings apply to all cells of the table in standard HTML. (Note: this is basic HTML, not using style sheets). When generating the HTML for the web page, Domino takes a look at the first cell of the table. That cell is used to determine the border status for the whole table. If there are any borders on that cell, then there are borders on the table (which means borders on every side of every cell). If there are no borders on that cell, then there are no borders on the table.

OK, so just make the first cell have no borders and the HTML table will have no borders. You can then use style sheets to update the borders on the web. But then there isn't the border in the Notes client like you want. So, here's a solution that will do the trick.

Create a very tiny column (as narrow as you can get) to the left of the first column. Put no data in that column. Set up the column to not have any borders. The first row of this column will be the first cell used when generating the HTML. Since that cell has no borders, the HTML table will have no borders. But since the column is very narrow and has no data, it won't affect anything else. For the rest of the columns, set the bottom border like before. This will show up in the Notes client. Again, the narrow column of no data and no borders should not affect things very much.

To add the bottom border on the web, add some HTML to the HTML Head section of your form:

"<style type=\"text/css\"><!--" + @NewLine +
"TD { border-bottom: 1px solid black; }" + @NewLine +
"// -->" + @NewLine +
"</style>" + @NewLine

This will tell the browser to add a thin bottom black border to every <TD> tag it finds on the web page. Note that this includes the thin column to the left of your actual data (like this picture) . So this may not look 100% right to you. To fix that, let's force a unique style sheet definition with no borders to the cells in that column. The easiest way to do this is to merge all the rows in that column in one cell. So you only have one cell to deal with. Go to the table properties while in that cell. Go to the last tab and set the class for that cell to be "NoBorder", as seen in this picture. This will apply a style sheet setting to this one cell (the cell is the merged column). So, update your HTML Head section to add a new line:

"<style type=\"text/css\"><!--" + @NewLine +
"TD { border-bottom: 1px solid black; }" + @NewLine +
".NoBorder { border: none; }" + @NewLine +
"// -->" + @NewLine +
"</style>" + @NewLine

Anything with the class of "NoBorder" will not have a border applied to it. So that one merged cell will not have a border, and the rest of the cells in the table will have a bottom border. So your table will look the same in the web browser (this picture) as it does in the Notes client (this picture).