Tables

Layout

You may have concluded that tables in your Rich Text Editor (RTE) are impossible to style. While that is not true, it is currently painfully labour-intensive.

For example, when you want a border around each cell, you will have to place your cursor in each cell, and edit each cell's properties to include a border. Doing this for the entire table will only create an outer border for that table, not the cells inside. In the RTE's Text Mode (HTML), html commands like border="1" are also not in use, and will be deleted after saving.

There is a workaround to more quickly edit those tables, but it will require some basic CSS/HTML skills; because this process was so annoying, we have asked to allow the usage of inline CSS in <table>, <tr>, and <td> tags. This means we can use style="" in these tags.

How you could manually speed things up:

  • Create the table with the correct content.
  • Go the Text Mode and copy the entire text
  • Open Notepad (or similar) and paste text
  • Use Find & Replace to find all <td> and replace with <td style="your inline CSS;">, where you include your custom layout between the style brackets
  • Use !important after each CSS command (and before the semicolon) if necessary, to override dominant CSS codes
  • Copy entire text again
  • Paste in RTE text mode

This will require some practice, but eventually, this works well. Make sure that you have a backup of the text you copy, so you can easily restore it when you forget a bracket somewhere.

There are also people reporting success using a website creation program such as DreamWeaver to generate code, so you could try that, too.

P.S.: attentive readers may have realized that because inline CSS is allowed within these table/tr/td brackets, there are much more options than just adding borders and background. You're right; you can manipulate all styles and effects within a table. Yee-haw. Use, but use with caution!