Introduction
You do not need to use tables to align images and text. There is an easier (and more web-friendly) way to do this.

An image, like text, appears in the normal flow of HTML in a page and can appear as a paragraph by itself, or as part of a paragraph of text.

Image alignment lets you set the relationship of an image to other content in the same paragraph. By using the image Property inspector, you can set the alignment of an image in relation to text in the same paragraph or line.

If you do not specify an alignment for the image, by default the baseline of the text (or other element in the same paragraph) will align with the bottom of the image, like this:

This is an example of the default relationship between an image and text which are included in the same paragraph. The default aligns the baseline of the text to the bottom of the image.

Most often, you will want to align the image to the left:

This is an example of the image aligned left.This is an example of the image aligned left.This is an example of the image aligned left.This is an example of the image aligned left.This is an example of the image aligned left.This is an example of the image aligned left.This is an example of the image aligned left.This is an example of the image aligned left.This is an example of the image aligned left.

or to the right

This is an example of the image aligned right.This is an example of the image aligned right.This is an example of the image aligned right.This is an example of the image aligned right.This is an example of the image aligned right.This is an example of the image aligned right.This is an example of the image aligned right.This is an example of the image aligned right.

How To

First, insert the image.

Insert text directly following the image.

Next, select the image by clicking on it. Go to the images Properties panel. Select Right or Left in the Align drop down box.

Important Note

Note that the image and the text must be in the same paragraph, if you find that the text doesn't begin at the top of the text, it is because it has been inserted as a new paragraph.

 

This is an example of what can happen when the text and the image are not in the same paragraph. This is an example of what can happen when the text and the image are not in the same paragraph. This is an example of what can happen when the text and the image are not in the same paragraph.

In order to remedy this, try inserting the text directly after the image, within the <p> (paragraph) tags. You can do this directly in the code view if you wish.

Another way to do this is to select the text, then locate the <p> tags relating to it on the status bar at the bottom of the page.

Select the <p> tag by right-clicking on it, then choose 'Remove Tag'.

Add Spacing Around the Image

In order that your text not "but up" against the image, select the image and add 5 px of hspace to it. This will preserve a white space around the image.