10 tips for producing nice, maintainable tables in Lotus Notes

1. Always set row and column spacing first

If you create a new table, it doesn’t come with any margins or padding, so the text basically sticks to the sides of the cells. The first thing you should do is adjust row spacing and column spacing so that the table content gets a little extra air. Table contents wants to breathe, so give it some room.

The following settings work for me for a lot of tables, but they are certainly not some fixed rule you have to obey.

Good row and column spacing

Sometimes I want the cells to be higher, sometimes (with bigger text) I want more horizontal spacing. Pick whatever seems suitable to you. The main thing here to remember, is that you set it first, before you start messing with text margins or spaces or other tricks that add whitespace.

2. Don’t use spaces, empty lines or line heights other than “Single” to adjust whitespace

If you use the spacebar for horizontal spacing and the enter button for vertical spacing, you’re worse than that person from accounting claiming to know how to word process and then you get that nice looking Word document filled with spaces and empty lines. It’s dirty and very hard to maintain (you have all those hidden signs spread all over the place).

If you want space, try rule number one first, and if you still need to make an exception in some cells, try using the text margins in the cells. But only in those rare cases. I sometimes have to edit tables that have text spacing set differently for every other cell. Looks like a bunch of toddlers you asked to form a row. And if you want to add a row, it doesn’t keep that spacing, so you have to set it again. This makes me very tired.

3. Don’t use special borders

Ridge and Groove are not groovy any more. They are soooo 90’s. They were even there when the internet was born. So give them the rest they deserve. R.I.P., Ridge!

4. Be careful with fixed width tables

If you choose a table that fits with margins or a fixed width table is really up to you, but if you pick the latter, there are some things you should consider:

  • Make sure your tables are printable. They may look good on your fancy widescreen monitor, but do they still fit on that portrait printed paper?
  • Make sure different tables have the same width or are at least proportional to eachother. Tables close to eachother should get in harmony to eachother/ But giving them the same width is not so easy in Notes, because you have to calculate the total width of the tables manually. There is a trick to achieve this: the simplest way is by using the action bar to align the right border. You stretch the action bar to the right border of the table, then change the other tables until they touch the action bar.
    Use the action bar border to give tables the same width
    You can also use a tool like JR Screen Ruler to achieve the same. In addition you get a neat way of measuring sizes on your screen.
    JR Screen Ruler

5. Don’t use drop shadows (a lot)

Less is more. If you give a drop shadow to every table on your page, it gets heavy. You see shades everywhere and you get the idea somebody is following you. Nobody will look at the actual content because the shadow wants all attention.

If you really really want to use it for a particular table, try a smaller shadow. 12px is really huge, I prefer very subtle shadow effects, some pixels to the max, but you’ll notice that the blur effect of the drop will disappear when you take a value lower than 6px. So 6px seems fine to me.

Different sizes of drop shadows compared

6. There are other blacks than black for borders

Most of the time, most of us probably use black 1px borders for cells. Try something else for a change. For example, I use very dark grey sometimes (like in the example above with the drop shadows). The difference is subtle, but it’s not as hard as a black bordered table.

Very light greys might also work well, since they divide your table just a little, but the soft borders are still enough to give the suggestion of separated lines. Here’s an example of the usage of lighter borders.

Example of a zebra striped table with gradients and soft borders

7. Change the defaults of tabbed tables

I don’t like the default settings for the tabs very much. Often people change them just a little, f.e. putting the title in bold to emphasize them.

Default tabs in bold

I believe they don’t need that. Users see the tabs anyway, so they don’t need that extra attention. Try another font, try another size. I like them tiny, like in the example below. It’s an 8pt Trebuchet MS font. Aren’t they cute?

Little tabs

8. Gradients? Use them, but don’t be a drag queen

I’m sure a lot of us were pleased seeing the gradient feature appear back in R5. But in the same way Flash can be abused as a tool to create preloaders and animated text, gradients can be a pain in the, eh, eye. So if you use them, use them wisely. Make the second color just a little lighter or darker than the first one. Gradients used that way can make your tables look a little less dull without adding color overkill. You can also see this in the little tabs example above.

The blues in the header have color values very close to eachother, while the white cells aren’t completely white: a very faint gradient was added to the top row.

9. Use tables as dialogbox

Layoutregions? I don’t use them anymore. They remind me of navigators and other R4 features I’m trying to get rid of. Instead I use the [SIZETOTABLE] option in @DialogBox, because tables are more flexible to me (after all, they worked as a basic layout tool in webdesign for years).

To make them look good, use (system) as the background color for the form. That way you won’t have any white edges on your dialogbox.

10. Just an idea: table templates

I find it difficult to design a pretty table. It can take a lot of time and finetuning before you get a result you’re pleased with. And on my next job, I start all over, with an empty, zero-layout table.

Wouldn’t it be a good idea to create some kind of table templates you can re-use, just by copying and pasting them? We could even take it a step further by showing and exchanging layouts. Open source tables! Well, maybe a little far fetched, but then again, something worth considering…

Anyway, enjoy your table manners!

8 Comments

  1. And if you are following tip no. 9, make especially sure to follow tip no. 2 as well. [SizeToTable] doesn’t play nicely with line height settings other then 1. It could be considered a bug, but since rule no. 2 should be obeyed anyway, … who cares?

    Reply
  2. Thank you for the extra tip 9bis, didn’t really notice this was a problem.
    I know that hiding lines in a table can be tricky, because the table takes the initial (visible) height and if you show a line of text extra, because of changed values, the dialog doesn’t resize, so part of the layout can fall out of the dialogbox.

    Reply
  3. Hi Martin,

    I’m using fixed size tables with a combined with of 17,5 cm everywhere in my form. The “normal” table has always 4 columns:
    4,2 cm for labels
    1,0 cm for icons, like “Select person” (centered)
    0,6 cm for an icon flagging mandatory fields (centered)
    11,7 cm for the fields

    And certainly, I have a copy of an empty table in a subform (rule 10).

    But I have some big issues with the first rule. Whenever I set the column spacing > 0 and merge cells (in a row), the table gets smaller every time I save the form?!? Unfortunately I cannot place an image here, but believe me, its happening. :-(

    If you use Absolute (left) text margins, the column cannot set smaller then the smallest field in it. This is normally no problem, but in some tables I want to have a “matrix” of fields.

    Relative text margins make it hard to get a straight vertical line, when there are merged cells in some rows…

    Therefore I got into the habit to enter exactly one space in each table cell. But this is bad for fields with content longer than one line…

    It’s still an open problem for me. :-(

    Reply
  4. Great sample of the “Deutsche Gründlichkeit” ;-). I experienced the same problem with changing table widths and merged cells. Whenever possible, I don’t merge them unless absolutely necessary (f.e. when I merge cells for a title row, but the title text is small, I just remove the right border of the first cell).

    I noticed that column widths sometimes depend on fieldwidth, but I didn’t realize it had to do with absolute margins. Good to know!

    Reply
  5. I’m using a lot of tables in a fairly straight forward manner. Basically what I’m creating is an outline with proper indenting of each subsection. It shows up perfect in a browser but the client is something else again. The tables are Fit With Margins. I’m merging a lot of cells so as to create the indent effect. When I open a doc in the client the margin’s left margin might be anywhere from 2 to 6 inches to the right. By opening the table’s property box, dropping down the Table Width, and clicking on Fit With Margins (which is where it already it) the table rights itself and returns to its normal size. Pain in the @$$ to have to fix it every time I open a doc with a table in it.

    Reply
  6. Do you know how to set the padding default for new tables?

    It’s boring to set the padding everytime I create a new table

    thx
    ciao

    Reply
    • You cannot change these defaults. However, you could create a dummy table with the settings you want, store it somewhere in a design element or draft document, and copy-paste that table whenever you need it. It’s the only workaroudn I can think of.

      Reply
  7. I have noticed you don’t monetize your website, don’t waste your traffic, you can earn additional cash every month because you’ve got hi quality
    content. If you want to know how to make extra
    bucks, search for: Mertiso’s tips best adsense alternative

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

56 − 51 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>