Editing pages with free layout tables

You can use free layout tables and cells so that you can easily position items on your Web page.

For example, you can control the exact placement of an image on the page by placing the image anywhere in a free layout table. You can also drag and drop components from the Palette to cells in the table.

With free layout tables you can arrange text and images by absolute coordinates. (Note that the actual free layout tables and cells are usually hidden when displayed in a browser.)

With free layout tables, you can easily lay out a Web page. You can create free layout tables and text cells via the menu or by dragging them from the

HTML Tags drawer of the palette and dropping them on a page. Adding a text cell will create a free layout cell, where you can add text or any other controls.

The free layout tables and cells give the page its basic structure. The underlying HTML source is automatically updated to create that cell. When the cursor is inside a text cell, it behaves just like a standard HTML table cell. If you add text or an object within an existing text cell, it is added at the cursor position. You can use the Properties view for modifying the free layout table and cells.

 

Adding objects to a free layout table

When you add objects (e.g., form controls) to empty areas of the free layout table, the object is added at that location. A text cell is automatically created and the object is placed within the text cell. You can add objects in the following ways:

If you add an object outside the existing free layout table, the object is inserted to the caret position.

 

Editing objects in a free layout table

You can edit objects in a free layout table in the following ways:

You can change design-time settings such as adding grid lines, setting snap-to settings, etc. Select

Window | Preferences | Web | Page Design | Layout

 

Related concepts

Page layout

 

Related tasks

Creating Web pages

Designing Web page layout

Creating pages in a free layout table

Creating and deleting a table in a Web page

Manipulating columns and rows in Web page tables

Laying out a page template with tables