How to position a table right of text?

[Purple Helen]

Hi - I am trying to position a small table to the right of a paragraph of text (rather than above or below the text).

I know you can do this with an image using "float right" - but is it also possible to do this (simply!) with a table?

I have found the "align" option in Table Properties, but that only moves the table, it doesn't allow text to the left of the table (so far as I can see).

I suppose what I am really asking is: is it possible to get text to flow around a table?

I am a writer, not a techie, so if you can help, please explain in words of one syllable! (If it requires complex coding, I'll have to hand over to my webmaster)

Many thanks

Helen

[Nita Beck]

Hi Helen. It's definitely possible to float at table, though it's not (at first) as easy as floating an image. The gist of the technique is to wrap the table within a div, and it is the div that is floated left or right, through CSS.

First, add a div class to your stylesheet. Call it something like div.FloatRight. If you are working in Flare's Stylesheet Editor, you want to look for the float property, which you should set to right. You might also set a left margin or left padding in order to allow for a little white space between the text to the left and the table to the right. If you're working directly in the stylesheet via the Internal Text Editor, it will look something like this:

Code: Select all

div.FloatRight
{
	float: right;
	margin-left: 10px;
}

Next, you need to wrap the table within the div, working in the XML Editor. To do so, right-click the table block and then select Select > Table. Now go to the Home ribbon and, in the Paragraph group, click Group. (It'll be the last button to the right in the Paragraph group.) The Create Group window will open, and you should select div.FloatRight.

That's the basic process. There might be some unexpected results, though, so you may need to tweak things or accept the results. For example, I experimented with this technique with a table that was being styled by a table stylesheet that gives the entire table rounded corners. But when I wrapped the table in the div, the table no longer had the rounded corners. I didn't spend any time figuring out why.

HTH

[Purple Helen]

Thanks Nita - that's very helpful. I think I have also discovered another way to achieve what you are describing - which is to use a text box, and put the table inside that.

Flare seems to let you float text boxes easily (without having to go into the coding - which was what I was trying to avoid!!) and that appears to be because the text box is automatically created in a "div" - so I think it is another way to arrive at the same result.

Many thanks for taking the trouble to reply.

Helen.

[Nita Beck]

Glad it was helpful. And very glad that you found a solution on your own.

Don't be afraid of "coding." It's the "coding" that gives Flare its power and that allows an author to do some extremely clever things.

Whatever you do, avoid inline formatting and instead use styles. Using styles makes your content ready to be output in different formats and optimizes it for localization; inline formatting hamstrings the content. For example, I recall once working on a translation project. The Flare author had created a two-column, single-row table to serve as a tip. The word TIP appeared in the first column, while the text of the tip was in the second column. That's just fine, but the author had used inline formatting to set the width of the first column, making it just wide enough to accommodate TIP. This worked great in English, but in Italian, the word TIP became SUGGERIMENTO, which broke crazily across lines because the column's width could not accommodate it.

Anyway, let us know what other questions you have!