Using layout boxes

To overcome the limitations of the normal single-column flow of content in HTML, Web authors often use a table to hold all the content of a page. The rows and columns of the table provide a convenient structure for authors to place content in specific locations on the page. However, setting up and managing a table for page layout is not easy, even for experienced authors. To make using tables for layout more accessible, Namo WebEditor includes a feature called layout boxes.

A layout box is an invisible box that contains layout cells that hold content. Within a layout box, you draw cells using the mouse. You move cells by dragging them, and you can resize cells without affecting the size of other cells or of the layout box. By default, a layout box has a grid to help you align layout cells.

When you create a layout box, Namo WebEditor automatically creates a borderless table in the underlying HTML source code with the same dimensions as your layout box. When you draw, move, resize, or remove cells in the layout box, Namo WebEditor automatically changes the table code to reflect your changes. Although you can see the layout box in Edit mode, it is invisible in browsers.

You can do the same kinds of layout tasks with layout boxes that you can with ordinary tables, but layout boxes are easier to use.

Namo Web Editor 3.layout box Using layout boxes

A small layout box containing four layout cells, as seen in Edit mode

In this section

Creating a layout box and layout cells

Resizing layout boxes and layout cells

Moving, duplicating, and removing layout cells

Aligning and distributing layout cells

Changing properties of layout boxes

Changing properties of layout cells

Converting between layout boxes and tables

Related topics

Using a table for layout

Tables

Layers

Using layout boxes