When you add a cell to your page, the following suggestions will help ensure that the content renders nicely.

Content Overflow

The user-generated content is not restricted in size -- a user may upload a very tall image, an extremely wide table, or content the size of a small novella, for example. Because of this, be sure that your content area can handle variable-width and variable-height content.

One way to do this is to implement an overflow rule in your CSS for that element. If you set the overflow to visible, hidden, auto, or scroll, then the content will not "push apart" the rest of your page. Depending on the style of your site, different options may work better.

Table Border Colors

When a user adds a table via the WYSIWYG editor, the border colors are inherited from your page. That is, if you had set the borders of tables to be red, they would appear red when users add them. If you do not specify a table border color, the user's browser will attempt to choose a color that best suits the page. In our experience, Internet Explorer 6 often does a poor job of this.

To override the border colors, specify the CSS down to the TD element. That is, your CSS rule should appear as table td { border-color:red }.

Other table styles are user-selectable (border width and style) and should not be overridden.

Background Images

If your user-editable content rests on a background image, try to add a background color as well as the image. This is often good practice, as the content may be more legible before the background image is loaded by the browser. In addition, the background color is inherited while the user is using the WYSIWYG editor. The background image is not inherited.