Use of tables and style sheet

Question

Hi all,
I am strungling using tables in RoboHelp HTML 7, to generate
webhelp.
What I try to accomplish is using tables in RH, and have its
formatting defined in a style sheet. The html code generated by RH
should be nice and clean. If possible I would not like to go into
the HTML code, I prefer the use of the Design editor.
I have the following in a new file in the RoboHelp table
gallery:
quote:
<table>
<caption>CAPTIONTITLE</caption>
<COL style="width: 5%;">
<COL style="width: 40%;">
<thead>
<tr><th></th><th></th></tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
The following is in the CSS file:
quote:
table {
border: 2px #c0c0c0 solid;
border-collapse: collapse;
width: "100%";
margin: 10px;
td, th {
border: 1px #c0c0c0 solid;
padding-left: 5px;
padding-right: 10px;
text-align: left;
vertical-align: top;
th {
background: #ffc000;
When I insert a table into a page, using the table file I
created above, the html looks like:
quote:
<table x-use-null-cells>
<col style="width: 33.333%;">
<col style="width: 33.333%;">
<col style="width: 33.333%;">
<tr><td style="padding-right: 10px; padding-left:
10px;" width=33.333%>
<p> </td>
<td style="padding-right: 10px; padding-left: 10px;"
width=33.333%>
<p> </td>
<td style="padding-right: 10px; padding-left: 10px;"
width=33.333%>
<p> </td></tr>
<tr><td style="padding-right: 10px; padding-left:
10px;" width=33.333%>
<p> </td>
<td style="padding-right: 10px; padding-left: 10px;"
width=33.333%>
<p> </td>
<td style="padding-right: 10px; padding-left: 10px;"
width=33.333%>
<p> </td></tr>
<tr><td style="padding-right: 10px; padding-left:
10px;" width=33.333%>
<p> </td>
<td style="padding-right: 10px; padding-left: 10px;"
width=33.333%>
<p> </td>
<td style="padding-right: 10px; padding-left: 10px;"
width=33.333%>
<p> </td></tr>
</table>
So, RoboHelp adds a number of styles to the inserted table
that overrules the style sheet. That shouldn't be done.
Also, in the RoboHelp editor the table looks different than
in the preview. That shouldn't be a big deal, but something is
missing:
- There's no table caption shown.
- The background in the table header is not colored as I
expected to be.
To eliminate the behavior of RoboHelp with respect to the
table gallery, I created a new page in RoboHelp, and opened the
HTML view. I inserted the following to create a new table.
quote:
<table>
<caption>CAPTIONTITLE</caption>
<COL style="width: 5%;">
<COL style="width: 40%;">
<thead>
<tr><th></th><th></th></tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
When switching to Design view and bach to HTML, it has been
converted by RoboHelp to:
quote:
<table x-use-null-cells>
<col style="width: 5%;">
<col style="width: 40%;">
<caption>CAPTIONTITLE</caption>
<tr><th style="width: 5%;" width=5%>
<p> </th>
<th style="width: 40%;" width=40%>
<p> </th></tr>
<tr><td style="width: 5%;" width=5%>
<p> </td>
<td style="width: 40%;" width=40%>
<p> </td></tr>
<tr><td style="width: 5%;" width=5%>
<p> </td>
<td style="width: 40%;" width=40%>
<p> </td></tr>
<tr><td style="width: 5%;" width=5%>
<p> </td>
<td style="width: 40%;" width=40%>
<p> </td></tr>
<tr><td style="width: 5%;" width=5%>
<p> </td>
<td style="width: 40%;" width=40%>
<p> </td></tr>
</table>
That seems ok, there are no styles redefined, other that the
width.
In Design view the table looks different than intended,
however in preview it is as expected. I shows the caption tile, and
the background of the table header, and text alignment is correct
(at the top of each cell).
So, my interpretation is that RoboHelp messes up the nice and
neat html code when using the table gallery, and does not show the
table in Design view as it would like in the Preview.
As a consequence I think I will copy and paste the table code
into the html directly, rather than using the table gallery.
Unless, there's a good solution by using the table gallery.
It would also be nice that the Design view behaves as a
WYSIWYG editor.
Has anyone an idea how I can use tables in RoboHelp as easy
as possible, while keeping the benefits of style sheets?
TIA,
Andre
BTW, my excuses for using quotes rather than attach code, but
it seemed all code was added to the end.

Answer 1

You should avoid locking yourself into a single solution for
anything to do with RH (or any other help authoring tool, for that
matter). Whether dealing with lists, tables, or images (the three
major areas that usually create problems), it's wise to strike a
balance between the features and drawbacks in HTML, CSS, RH, and
web browsers.
Confronted with the issue of changing border colors and table
heading colors earlier this year (and having to do this for the 42
projects in our merged WebHelp project), I simply used
FAR to change the hex numbered
colors in the code, outside of RH (from #808080 to #d8e4f8, for
example). Some freeware products for content replacement are also
available.
If you've used those colors for other things, such as H1/H2,
or other backgrounds, etc., you'll need to identify all table uses
first, and then change only those instances. You could then set up
a batch file to change all border-right-color: #808080;
border-left-color: #808080; etc. all at once
You could also just use the RH Multi-File Find & Replace
if you're only dealing with a few projects, since these table
attributes are likely to always appear as complete on a single line
(the RH feature doesn't handle search and replace strings
interrupted by line breaks and multiple spaces).
All of our tables had been created using Rick's solution via
the Table Gallery, and the background and border colors show up
identically in Design, Preview, and output views. The only use of
the css for our tables is the styling of the actual text that
appears in the cells (TableHead, TableRow, TableSubHead), such as
shown in the attached code below.
BTW, another look at your original post shows that your claim
that "RoboHelp adds a number of styles to the inserted table that
overrules the style sheet," is not quite on the mark. The only
change is that the
"padding-left:" value has been increased from the CSS 5px to
10px. I would guess that you have a 5px indent in either your BODY
or P tag in the CSS, thereby resulting in the value being increased
to the total of 10px.
Good luck,
Leon