Skip Headers
Oracle® Fusion Middleware User's Guide for Site Studio Contributor
11g Release 1 (11.1.1)

Part Number E10611-01
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Index
Index
Go to Master Index
Master Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to current chapter
Up
Go to next page
Next
View PDF

6 Working With Tables

A table can be used for several different purposes on a web page. If you have spent much time in a word processing program, then you are probably familiar with tables for organizing text and graphics or presenting data in a tabular way (similar to a spreadsheet).

On a web page, you can use a table for the same purpose. In addition, you can use it for its more common use on the web pages, and that is to structure content. On a typical web page, text, graphics, and other content appears in a free-flowing way. The text and images wrap, and one item appears after the next. There is no way to control where items appear on the web page, and this is where tables become useful.

Using a table, you can place text or images in one cell and align it accordingly, and then place more text or images in another cell and align it accordingly. If, for example, you want to place text beside an image, or place text, graphics, and other types of content side-by-side or one on top of the other, then you would use a table.

You can perform the following tasks with a table:

6.1 Adding a Table

You can add tables in Contributor using the editing toolbar. Once you add the table, you can resize it, change its properties, and more.

To add a table, perform these tasks:

  1. Place your cursor where you would like to add the table.

  2. Click the Insert Table icon (Figure 6-1) in the editing toolbar.

    Figure 6-1 Table Icon

    Table icon

    The table properties dialog is displayed (Figure 6-2).

  3. Specify or edit each table property as required:

    • Rows: Specifies the number of rows in the table.

    • Columns: Specifies the number of columns in the table.

    • Border size: Specifies the border size for the table (in pixels). (Set this to 0 if you do not want borders around the table.)

    • Alignment: Specifies if the table uses the default setting, or is right aligned, left aligned, or centered.

    • Width: Specifies the width of the table (in pixels or percentage of the page width). If you do not specify a width, the table is sized automatically to fit the cell contents.

    • Height: Specifies the height of the table (in pixels). If you do not specify a height, the table is sized automatically to fit the cell contents.

    • Cell spacing: Specifies the thickness of the cells borders.

    • Cell padding: Specifies the space between the contents of a cell and the inside border of a cell.

    • Caption: Specifies the title of your table. The title appears above the table.

    • Summary: Sets a comment on the table. The comment will not appear in the table. Providing a summary is useful for accessibility purposes.

    Not all of the options are required to build a table. You have to provide the number of rows and columns. All other attributes are optional and you may use them depending on your needs.

  4. Click OK to add the table.

    The table is added to your page. You can then resize and change its attributes using your mouse or the table properties dialog (see "Changing the Properties of a Table").

6.2 Resizing a Table

You can resize a table as a whole using the mouse or the table properties dialog.

Resizing Using the Mouse

To resize a table using your mouse, perform these tasks:

  1. Place your mouse cursor over a table border until the cursor turns into an arrows cross and click your left mouse button.

    A frame is now displayed around the table to indicate it has been selected (Figure 6-3).

    Figure 6-3 Unselected and Selected Table

    Unselected and selected table (with frame)
  2. Click and drag any of the boxes of the frame to resize the table.

Resizing Using the Table Properties Dialog

You can also change the size of a table as a whole in the table properties dialog. See "Changing the Properties of a Table".

6.3 Changing the Width of Columns in a Table

To change the width of a column in a table, perform these tasks:

  1. Place your mouse cursor in any cell of the column you want to resize.

  2. Right-click and choose Cell, then Cell Properties.

  3. Specify a value in the Width field (either in pixels or a percentage).

  4. Click OK.

The column is now displayed in its updated width. If it does not look like what you were expecting, there may be table width settings that may take precedence. See "Changing the Properties of a Table".

6.4 Changing the Height of Rows in a Table

To change the height of a row in a table, perform these tasks:

  1. Place your mouse cursor in any cell of the row whose height you want to change.

  2. Right-click and choose Cell, then Cell Properties.

  3. Specify a value in the Height field (in pixels).

  4. Click OK.

The row is now displayed in its updated height. If it does not look like what you were expecting, there may be table height settings that may take precedence. See "Changing the Properties of a Table".

6.5 Adding Rows or Columns to a Table

You can add rows and columns to a table using your mouse.

Adding a Row to a Table

To add a row to a table, perform these tasks:

  1. Place your mouse cursor in a row where you want to add the row.

  2. Right-click and choose Row, then Insert Row Before or Insert Row After, depending on whether you want the row to appear above or below the current row.

Adding a Column to a Table

To add a column to a table, perform these tasks:

  1. Place your mouse cursor in a column where you want to add the column.

  2. Right-click and choose Column, then Insert Column Before or Insert Column After, depending on whether you want the column to appear to the left or to the right of the current column.

After you add the row or column, you can fine-tune their width using the cell properties form (see "Changing the Properties of Table Cells").

6.6 Deleting Rows and Columns in a Table

You can delete rows and columns to a table using your mouse.

Deleting a Row From a Table

To delete a row from a table, perform these tasks:

  1. Place your mouse cursor anywhere in the row you want to delete.

  2. Right-click and choose Row, then Delete Rows.

Deleting a Column From a Table

To delete a column from a table, perform these tasks:

  1. Place your mouse cursor anywhere in the column you want to delete.

  2. Right-click and choose Column, then Delete Columns.

If you change your mind, you can press Ctrl+Z to undo the action.

6.7 Splitting and Merging Cells in a Table

You can split and merge cells in a table. Splitting cells is similar to adding a row or column, but it all takes place in one cell instead of a group of cells. Merging cells, however, is similar to deleting a cell and then adjoining it with a neighboring cell.

Splitting Cells in a Table

To split cells in a table, perform these tasks:

  1. Place your mouse cursor in the cell you want to split.

  2. Right-click and choose Cell, then Split Cell Horizontally or Split Cell Vertically, depending on whether you want to split the cell into two columns or rows.

Merging Cells in a Table

To merge cells in a table, perform these tasks:

  1. Place your mouse cursor in the cell to merge.

  2. Right-click and choose Cell, then Merge Right or Merge Down, depending on whether you want to merge the cell with the cell on its right or with the cell below it.

6.8 Changing the Properties of a Table

After you add a table to the page, you may want to modify some of its properties. You do this using the Table Properties dialog. You can change the number of table rows and columns, the table width and height, and some display options.

To change the properties of a table, perform these tasks:

  1. Place your mouse cursor anywhere in the table whose properties you want to edit.

  2. Right-click and choose Table Properties.

    The Table Properties dialog is displayed (Figure 6-4).

  3. Specify or edit each property as required:

    • Rows: Specifies the number of rows in the table.

    • Columns: Specifies the number of columns in the table.

    • Border size: Specifies the border size for the table (in pixels). (Set this to 0 if you do not want borders around the table.)

    • Alignment: Specifies if the table uses the default setting, or is right aligned, left aligned, or centered.

    • Width: Specifies the width of the table (in pixels or percentage of the page width). If you do not specify a width, the table is sized automatically to fit the cell contents.

    • Height: Specifies the height of the table (in pixels). If you do not specify a height, the table is sized automatically to fit the cell contents.

    • Cell spacing: Specifies the thickness of the cells borders.

    • Cell padding: Specifies the space between the contents of a cell and the inside border of a cell.

    • Caption: Specifies the title of your table. The title will appear above the table.

    • Summary: Sets a comment on the table. The comment will not appear in the table. Providing a summary is useful for accessibility purposes.

  4. Click OK when you have finished.

6.9 Changing the Properties of Table Cells

After you add a table to the page, you may want to modify some cell properties. You do this using the Cell Properties dialog. You can change the number of table rows and columns, the table width and height, and some display options.

To fine-tune the appearance of the individual cells in that table, you should use the table cell properties form. This form can be used to change the alignment, height and width, background color, and more for the individual cells in the table.

To change the properties of a table cell, perform these tasks:

  1. Place your mouse cursor anywhere in the table cell whose properties you want to edit.

  2. Right-click and choose Cell Properties.

    The Cell Properties dialog is displayed (Figure 6-5).

    Figure 6-5 Cell Properties Dialog

    Cell properties dialog
    Description of "Figure 6-5 Cell Properties Dialog"

  3. Specify or edit each cell property as required:

    • Width: Specifies the width of the cell (in pixels or percentage of the table width). Please note that this affects the width of the entire column that the cell is in.

    • Height: Specifies the height of the cell (in pixels). Please note that this affects the height of the entire row that the cell is in.

    • Word Wrap: Turns word wrapping for the cell contents on or off. If you turn on word wrapping, the cell contents automatically flow to the next line if it exceeds the defined cell width. If you turn off word wrapping, the cell width is adjusted automatically to fit the cell contents on a single line (unless there is any column width restriction).

    • Horizontal Alignment: Specifies the horizontal position of the contents in the cell (left, centered, right).

    • Vertical Alignment: Specifies the vertical position of the contents in the cell (top, middle, bottom, baseline).

    • Rows Span: Specifies the number of rows that a cell spans.

    • Columns Span: Specifies the number of columns that a cell spans.

    • Background Color: Specifies a color for the background of the cell. Click Select next to this field to pick a color. The field shows the color as its hexadecimal value.

    • Border Color: Specifies a color for the borders of the cell. Click Select next to this field to pick a color. The field shows the color as its hexadecimal value.

  4. Click OK when you have finished.

6.10 Deleting a Table

To delete a table, perform these tasks:

  1. Place your mouse cursor anywhere in the table to delete.

  2. Right-click and choose Delete Table .

    The table is deleted.

Important:

When deleting a table, you delete everything inside the table as well (text, graphics, and so on). You may want to move that content out of the table before deleting it.