Working with Tables in the Visual Editor

Tables can be used to design page layout, as in this example, as well as to lay out data, and position text and graphics on a web page. The Insert Table dialog helps you to add the HTML <table> element and set up the initial properties in the skeleton table.

After inserting the skeleton table, you will use the Component Palette and visual editor to design the registration form by adding input fields and labels.

You can also easily modify both the appearance and the structure of the table using the visual editor. You can edit tables to add text and images; add, delete, resize, reorder, split, and merge rows and columns; modify table, row, or cell properties for color and alignment; copy and paste cells; and nest tables in table cells.

To modify all or part of a table in the visual editor, first select the table, rows, columns or cells. To select:

• The entire table, place the cursor at the bottom right corner of the table border, and click when the table selector icon appears.
• Rows, place the cursor on the left border of the table and click when the row selector icon appears.
• Columns, place the cursor on the top border of the table, and click when the column selector icon appears.
• Cells, click in a single cell or press Ctrl and click in multiple cells.

When you select a table in the visual editor, blue resize handles appear at the bottom and right sides, and in the bottom right corner of the table, as shown in the illustration earlier.

To resize a table:

• Drag the resize handles to the desired size for the table.

To change the size of rows or columns:

• Place cursor at the border of the row or column you wish to resize, and click when the horizontal border handle or vertical border handle appears.

To set properties for a selected table or cell using the visual editor toolbar:

• Click Background Color to apply a color to the table, row, or cell in the selected color.
• Click Left Center Right to apply the respective left, center or right alignment to a selected table.
• Click Indent or Outdent to indent or remove indentation from the selected table by applying or removing the <blockquote> tag.

Copyright © 1997, 2009, Oracle. All rights reserved.