Use of tables and style sheet

[Guest]

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.

[MergeThis · Accepted solution]

See Peter Grainge's web site for Rick Stone's method of adding preformatted tables to the Gallery. It works perfectly, without having to deal with the CSS file.

Hint: To force my new customized tables to the top of the list in the dialog, I started them with numbers (1Header, 2NoHeader, 3Blank, etc.).


Good luck,
Leon

[Guest]

Hi Leon,

Thanks for the reply.

If I understand Rick's solution correctly, then there will be formatting in the table gallery (such as borders, shading, and background. I would like these to be controlled by the style sheet (CSS).
Actually I tried Ric'k's way except with the formatting in the table gallery. I only used the width and defined the number of rows and columns. Formatting should be handled by the CSS.
But as I tried to describe in my post there are side effects. Besides that the HTML code contains formatting that overrules the CSS.

So, I still don't understand how I can control ALL formatting is handled by the CSS, and both the Design view and Preview shows the correct formatting.

Kind regards,
Andre

[MergeThis]

You seem determined to use the CSS (your method which is not working) instead of the easier route provided by Rick (which does work), for reasons known only to you.

As to how RH sets up its code, I've always figured: who the heck cares? The RH developers needed to create the WYSIWYG view, a Preview window, and up to a half dozen output layouts. So what if they used indents, colors, repetitive style makers, kadov tags, etc.?

Since you "prefer the use of the Design editor" anyway, why do you feel the need to muck around in the CSS file when you don't have to?


Good luck,
Leon

[Guest]

Well Leon,

quote:

---

why do you feel the need to muck around in the CSS file when you don't have to?

---

As my company has plans to change their look and feel of the web site, I expect I have to change format as well. When styles are made part of each topic, there's no easy way to change the format of e.g. a table (such as other borders, colors, etc).
I could be wrong, but that's one thing I understand of style sheets; easy change of formatting.

Thanks and kind regards,
Andre

[MergeThis]

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

[Guest]

Ok Leon, I'll follow your advise and give it another try.

Thanks for your response.

Andre

[Peter Grainge]

Also see my site under Tables for how to define a table from the style sheet using RH7.

[Guest]

Peter, thanks for the post.

quote:

---

Also see my site under Tables for how to define a table from the style sheet using RH7.

---

This brought me to another alternative.

I created a topic file, with just two tables. the two types I use in my project. this topic file is just used as a template for table; I don't use it in my TOC.
The code for the tables I have written in HTML directly. (See attachment).
The style for the table I have defined in the CSS. (See attachement as well).

So, what I do when I want to use a table, I select the table in RoboHelp Design View, switch to HTML view (the code for the table is selected now), I copy the selection, and paste in in the right location of my target topic (in HTML view).
Then I switch to Design view (of the target topic) and add more culumns and rows if I need them.

(Note that Table1 has a style defined in the CSS. There's also one for a header for each row.)
This way all styles are specified in the CSS, and nothing is overridden by definitions in the HTML file.
Further improvement may be to introduce classes, and define more paragraph styles as desired.

Regards,
Andre

[Peter Grainge]

In essence you just have a blank topic with those tables already set up. That is a fairly standard method for many things that take time to set up. Be aware though you need to exclude it from the build. Excluding a topic from the TOC does not exclude it from the build, not sure if you are aware of that.

Do test your tables in printed output if you use that before you go to far.

Finally, note that RH does not support true HTML Header Rows <th>

[Guest]

quote:

---

Be aware though you need to exclude it from the build.

---

I am aware of that, I have excluded it from the build by a conditional build tag. Thanks for reminding me.

quote:

---

Do test your tables in printed output if you use that before you go to far.

---

Good suggestion, will do that.

quote:

---

Finally, note that RH does not support true HTML Header Rows <th>

---

That's probalby why it isn't shown correctly in Design and Preview. It displays as expected when I build the webhelp output, and that's the most important for me.

[Guest]

quote:

---

Do test your tables in printed output if you use that before you go to far.

---

Grrr, just created a word doc and the tables doesn't have borders at all. Everything else is shown correctly.

When I open the table properties in RH Design view, both the Table and Cell borders have the values I have specified in the CSS, so RH is aware of these settings, but it does not show it in the word doc.

[Peter Grainge]

Use the CSS described on my site for this. The borders come through in Word using that.

[Guest]

It seems that when I specify the values for the border on a single line it is not interpreted well when generating Printed Documentation.

My CSS had the values of the border in one entry, like:
border: 2px #c0c0c0 solid;
When I change this to three specific entries:
border-color: #c0c0c0;
border-style: solid;
border-width: 2px;
The borders do show up in the word doc as well.

Peter, thanks for your example.