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