Preformatted Tables

What's covered?

If you simply click the tables icon in RoboHelp you get a table with the required number of columns and rows, all with a black border. If you regularly need to insert a table with rather more formatting than that, it's time to learn how to define tables that will be in the list you see when you click Table | Insert | Table.

There are three methods:

You can use the supercool method devised by Rick Stone.
You can use Macro Express.
You can write your own file. The latter method is a bit like creating all your html files in Notepad and has now been relegated for use by committed masochists only!

Rick's Method

Many thanks to Rick Stone for coming up with this supercool method. Glance at the other method and you will understand why this one is so good!

Insert a table that MUST be three columns by three rows.
Format it as required with borders, shading and background images. You cannot include any text styles or padding details. (Well you can, but they won't work!)
Select the entire table (Table | Select | Table) and open the TrueCode editor. The TrueCode editor should open and have all the necessary text selected. Ensure that the code begins with <table> and ends with </table>
Copy the selected text to the Windows Clipboard.
Open a text editor such as Notepad.
Paste the code copied from the TrueCode window into the editor.
Save the file to C:\Program Files\RoboHelp Office\RoboHTML\Gallery\Tables using the format yourfilename.htmtable
Click Table | Insert | Table and your file should be in the list. Just select the number of rows and columns you want.

The columns in the table will be of equal width and the method will not hold any details about padding or text styles. If this means this method does not give you what you need, consider using Macro Express (low cost and worth every penny or cent). You can set Macro Express up to set your favourite column widths, styles and so on when you press the defined key combination.

For those of you who create printed documentation

The formatting will carry through in Word.
Don't be tempted to edit the file so that the colours are defined in RGB terms. In Word it will have a black border applied.

Macro Express

Macro Express can be used to automate a whole variety of tasks and I would not work without it. One of its functions is a bit like Word's autotext in that you have keywords with a prefix of suffix of your choice. Type something like #table1 and Macro Express will insert the html code for a table.

You just create the table in RH with all your requirements which can include the styles in various cells, padding, column widths, border colours, whatever you want including text if need be. Then you select the html for the whole table from and including <table> to and including </table> and link it to a keyword in Macro Express.

Whenever you want to add a table with this formatting, you just switch from RH WYSIWYG view to True Code view, get the cursor where you want the table to start and type #table1, or whatever keyword you have used. Go back to WYSIWYG view and your table is there.

The Alternative

This is the text book method. If you qualify as a committed masochist and really want to understand how the htmtable file type works, carry on. I accept no liability for your future!

How is it done?

The bit you have to get your mind around is

The borders apply to cells.
You need to define the three columns and rows that RH shows in the preview when you click Table | Insert | Table, so that no two adjacent cell borders are defined. For example, you must not define the right cell border for column 1 row 1 and the left cell border for column 2 row 1.
You must not apply any table borders.

Below is a sample table and an annotated version of an htmtable file. Read through both as they work hand in hand.

Column 1 Row 1

Define left, right, top and bottom borders for this cell.

Column 2 Row 1

Define right, top and bottom borders for this cell.

Column 3 Row 1

Define right, top and bottom borders for this cell.

Column 1 Row 2

Define left, right and bottom borders for this cell.

Column 2 Row 2

Define right and bottom borders for this cell.

Column 3 Row 2

Define right and bottom borders for this cell.

Column 1 Row 3

Define left, right and bottom borders for this cell.

Column 2 Row 3

Define right and bottom borders for this cell.

Column 3 Row 3

Define right and bottom borders for this cell.

The blue text is not in the actual file, it is just added here to aid explanation. If you want to use this file, copy all the text in the table, paste it into a text editor and delete the lines starting // and then save it as yourfilename.htmtable.

// These lines define the table. Don't change anything here.

<TABLE null_cells style="x-cell-content-align: top; width: 100%; alignleft;border-spacing: 0;"

width=100% >

// This is the start of Row 1.

// This defines Column 1, Row 1. Note all four borders are defined.

<TD style="padding-right: 10px; padding-left: 10px;

border-left-width: 1px; border-left-color: #32649b; border-left-style: Solid;

border-right-width: 1px; border-right-color: #32649b; border-right-style: Solid;

border-top-width: 1px; border-top-color: #32649b; border-top-style: Solid;

border-bottom-width: 1px; border-bottom-color: #32649b; border-bottom-style: Solid;

background-color: rgb(160, 190, 215);" bgcolor=#800000 width=33.333% ><p> </P></TD>

// This defines Column 2, Row 1. Note it does not define the left border.

// Covered by C1R1's right border.

<TD style="padding-right: 10px; padding-left: 10px;

border-right-width: 1px; border-right-color: #32649b; border-right-style: Solid;

border-top-width: 1px; border-top-color: #32649b; border-top-style: Solid;

border-bottom-width: 1px; border-bottom-color: #32649b; border-bottom-style: Solid;

background-color: rgb(160, 190, 215);" bgcolor=#800000 width=33.333% ><p> </P></TD>

// This defines Column 3, Row 1. Note it does not define the left border.

// Covered by C2R1's right border.

<TD style="padding-right: 10px; padding-left: 10px;

border-right-width: 1px; border-right-color: #32649b; border-right-style: Solid;

border-top-width: 1px; border-top-color: #32649b; border-top-style: Solid;

border-bottom-width: 1px; border-bottom-color: #32649b; border-bottom-style: Solid;

background-color: rgb(160, 190, 215);" bgcolor=#800000 width=33.333% ><p> </P></TD></TR>

// This is the start of Row 2.

// This defines Column 1, Row 2. Note it does not define the top border.

// Covered by C1R1's bottom border.

<TD style="padding-right: 10px; padding-left: 10px;

border-left-width: 1px; border-left-color: #32649b; border-left-style: Solid;

border-right-style: Solid; border-right-color: #32649b; border-right-width: 1px;

border-bottom-style: Solid; border-bottom-color: #32649b; border-bottom-width: 1px;"

width=33.333% ><P> </P></TD>

// This defines Column 2, Row 2. Note it does not define the top or left border.

// Covered by C2R1's bottom border and C1R2's right border.

<TD style="padding-right: 10px; padding-left: 10px;

border-right-style: Solid; border-right-color: #32649b; border-right-width: 1px;

border-bottom-style: Solid; border-bottom-color: #32649b; border-bottom-width: 1px;"

width=33.333% ><P> </P></TD>

// This defines Column 3, Row 2. Note it does not define the top or left border.

// Covered by C3R1's bottom border and C2R2's right border.

<TD style="padding-right: 10px; padding-left: 10px;

border-right-width: 1px; border-right-color: #32649b; border-right-style: Solid;

border-bottom-width: 1px; border-bottom-color: #32649b; border-bottom-style: Solid;"

width=33.333% ><P> </P></TD></TR>

// This is the start of Row 3.

// This defines Column 1, Row 3. Note it does not define the top border.

// Covered by C1R2's bottom border.

<TD style="padding-right: 10px; padding-left: 10px;

border-left-width: 1px; border-left-color: #32649b; border-left-style: Solid;

border-right-width: 1px; border-right-color: #32649b; border-right-style: Solid;

border-bottom-style: Solid; border-bottom-color: #32649b; border-bottom-width: 1px;"

width=33.333% ><P> </P></TD>

// This defines Column 2, Row 3. Note it does not define the top or left border.

// Covered by C2R2's bottom border and C1R3's right border.

<TD style="padding-right: 10px; padding-left: 10px;

border-right-width: 1px; border-right-color: #32649b; border-right-style: Solid;

border-bottom-style: Solid; border-bottom-color: #32649b; border-bottom-width: 1px;"

width=33.333% ><P> </P></TD>

// This defines Column 3, Row 3. Note it does not define the top or left border.

// Covered by C3R2's bottom border and C2R3's right border.

<TD style="padding-right: 10px; padding-left: 10px;

border-right-width: 1px; border-right-color: #32649b; border-right-style: Solid;

border-bottom-style: Solid; border-bottom-color: #32649b; border-bottom-width: 1px;"

width=33.333% ><P> </P></TD></TR>

</TABLE>

If the border colours are expressed in RGB values, the table will still display correctly in RoboHelp. Note though that if you generate printed output, then with RGB values the table will have a black border around it in Word.

By expressing the same colour for borders but in hexedecimal format, the table converts correctly in Word!

The hexadecimal value above below equates to rgb(50, 100, 155).

If you get this far, email me. I'll try to get help for you.

Topic Revisions

Date

Changes to this page

09 Jun 2004

Topic revised to include Rick Stone's supercool timesaving method.

Alternative method of creating tables using Macro Express added.

31 May 2004

Note re using hexadecimal values reworded and moved.