Table Borders

What's covered?

This topic provides information about defining the table and cell borders in RoboHelp.

What you do in RoboHelp

In all versions of RoboHelp prior to Adobe RoboHelp 7, table and cell borders could only be applied using inline styling. That changed in RoboHelp 7 and it is now possible to create a table in the Design Editor with no borders and have the table and cell borders defined from your CSS file. Here is what you need to know.

The change only applies to tables created with no inline borders or that you have changed to having no inline borders.
The easy way to create new tables with no borders is to create a RoboHelp preformatted table with no borders. Then you can select that from the RoboHelp menu or toolbar.
After adding the table, you simply go into the HTML View and add the class. <table class=yourname x-use-null-cells etc.
When you generate your help, the result will be good in both Internet Explorer and Firefox. I have not tested other browsers.

Adobe RoboHelp 8 has a built in Table Editor. See About RoboHelp 8 and the RoboHelp Tour.

What you do in your stylesheet

So creating your table in RoboHelp is easy but what do you need to do in your stylesheet, the CSS file? That too is easy thanks to Scott DeLoach. Sometime ago I found the code that is used on this site but it has what would be a drawback for some. The outer table border has to be the same as the inner cell borders. Whilst the code could specify different colours that would work in Internet Explorer, Firefox would only display the inner cell border colour. Scott's method is nice because it does not have that restriction.

Scott's code was written for an editor such as Dreamweaver but in testing with RoboHelp I had to make some modifications. I also added a class to Scott's code so that it does not change any existing tables you may have. Change yourname to whatever you want to name the class. I have changed the colour specification to RGB but you can use whatever method you prefer. If you want this definition to apply to all tables then remove .yourname but I suggest you do apply a class to give more flexibility if requirements change later on.

Scott's Code

This code will work in Dreamweaver etc.

table.yourname {
border-collapse: collapse;
border-color: rgb(255, 99, 71);
border-style: solid;
border-width: 1px;
}

.yourname th, td
{
border-color: rgb(0, 0, 205);
border-style: groove;
border-width: 1px;
}

Scott explained that the inclusion of border styles allows the table border to take precedence over the cell border. He has taken advantage of this to produce code that enables the table to have a different border to the cells.

Scott advises that the priority order is:

double, solid, dashed, dotted, ridge, outset, groove, inset

In a page from Dreamweaver, the display is good at low border widths but some imperfections may be seen with certain combinations at higher border widths. For example, with widths of 5px and 3px and using "solid" and "groove", there is a small gap between the horizontal border of cells in columns two and above and the vertical border.

If you use this code with Dreamweaver, you will need to experiment with the different border styles to find what works for you if you need wider borders. Fortunately this is not a problem with RoboHelp.

Code for RoboHelp

table.yourname {
border-collapse: collapse;
border-color: rgb(255, 99, 71);
border-style: solid;
border-width: 1px;
}

.yourname td {
border-color: rgb(0, 0, 205);
border-style: solid;
border-width: 1px;
}

The definition for the table (table.yourname) is unchanged.

The definition for the cells (.yourname th, td) requires two changes to work in RoboHelp.

The th (table heading definition has been removed). If left in, it affects tables without a class.
The style has been set to solid as groove is not recognised by the HTML editor. Whilst FF requires the cell border to be subserviant to the table border with output from Dreamweaver etc, it is quite happy with RoboHelp output where both borders are specified as Solid.

Because the border style is the same for both the table and the cells, borders in a RoboHelp output will not have the problems described above if you use higher border widths.

Adding the Code

You need to edit your stylesheet outside of RoboHelp. Open it using Notepad or your preferred text editor, better still use TopStyle which is a dedicated stylesheet editor. Just add the code above and make any colour and width changes you need.

Topic Revisions

Date	Changes to this page
16 May 2009	Reference to RoboHelp 8's built in table editor added.
09 May 2008	New topic.