%brandDTD; ] >
In this section: Starting a New Page Formatting Your Web Pages Using Style Sheets to Style Your Web Pages Adding Tables to Your Web Page Adding Pictures (Images) to Your Web Page Working with Table of Contents on Your Web Page Working With Templates Setting Page Properties Creating Links in &brandShortName; Customizing &brandShortName;

## Adding Tables to Your Web Page

### Inserting a Table

Tables are useful for organizing text, pictures, and data into formatted rows and columns. To insert a table:

1. Click to place the insertion point where you want the table to appear.
2. Click the Table button on the Composition toolbar. The Insert Table dialog box appears.
3. Type the number of rows and columns you want.
   - (Optional) Enter a size for the table width, and select either percentage of the window or pixels.
4. Enter a number for the border thickness (in pixels); enter zero for no border.

   Note: &brandShortName; uses a red dotted line to indicate tables with a zero border; the dotted line disappears when the page is viewed in a browser.

5. To apply additional table attributes or JavaScript, click Advanced Edit to display the Advanced Property Editor.
6. Click OK to confirm your settings and view your new table.

To change additional properties for your new table, see Changing a Table's Properties.

Tip: To insert a table within a table, open the Insert menu and choose Table.

[ Return to beginning of section ]

### Changing a Table's Properties

This section describes how to modify properties that apply to an entire table as well as the rows, columns, or individual cells within a table. If you are not currently viewing the Table Properties dialog box, follow these steps:

1. Select the table, or click anywhere inside it.
2. Click the Table button on the toolbar, or open the Table menu and choose Table Properties. The Table Properties dialog box contains two tabs: Table and Cells.
3. Click the Table tab to edit these properties:
   - Size: Use this to specify the number of rows and columns. Enter the width of the table and then choose "% of window" or "pixels." If you specify width as a percentage, the table's width changes whenever the &brandShortName; window's or browser window's width changes.
   - Borders and Spacing: Use this to specify, in pixels, the border line width, the space between cells, and the cell padding (the space between the contents of the cell and its border).

     Note: &brandShortName; uses a dotted outline to display tables with a zero border; the dotted line disappears when the page is viewed in a browser.

   - Table Alignment: Use this to align the table within the page. Choose an option from the drop-down list.
   - Caption: Choose the caption placement from the drop-down list.
   - Background Color: Use this to choose a color for the table background, or leave it as transparent.
4. To apply additional attributes or JavaScript events, click Advanced Edit to display the Advanced Property Editor.
5. Click Apply to preview your changes without closing the dialog box, or click OK to confirm them.

To view, change, or add properties for one or more cells:

1. Select the row, column, or cell, then open the Table menu and choose Table Properties. The Table Properties dialog box appears.
2. Click the Cells tab to edit the following properties:
   - Selection: Choose Cell, Row, or Column from the drop-down list. Click Previous or Next to move through rows, columns, or cells.
   - Size: Type a number for Height and Width, and then choose "% of table" or "pixels."
   - Content Alignment: Select a vertical and horizontal alignment type for the text or data inside each cell.
   - Cell Style: Select Header from the drop-down list for column or row headers (which centers and bolds the text in the cell); otherwise choose Normal.
   - Text Wrap: Select "Don't wrap" from the drop-down list to keep text from wrapping to the next line unless you insert a paragraph break. Otherwise, choose Wrap.
   - Background Color: Select a color for the cell background or leave it as transparent.

     Note: To apply additional attributes or JavaScript events, click Advanced Edit to display the Advanced Property Editor

3. Click Apply to preview your changes without closing the dialog box, or click OK to confirm them.

Tip: To change the text color or background color of one or more selected cells or the entire table, select the cells or click anywhere in the table and then click the text color or background color icon in the Format toolbar.

Tip: To change the color of cells to the color last used, select the cell, then press Shift and click on the background color picker. This is useful when you want to use one color for individual cells.

[ Return to beginning of section ]

### Adding and Deleting Rows, Columns, and Cells

&brandShortName; allows you to quickly add or delete one or more cells, columns, or rows in a table. In addition, you can set options that allow you to maintain the original rectangular structure or layout of the table while you perform editing tasks.

To add a cell, row, or column to your table:

1. Click inside the table where you want to add a cell (or cells).
2. Open the Table menu and then choose Insert.
3. Choose one of the cell groupings. (You can also insert a new table within a table cell.)

To delete a cell, row, or column:

1. Click a row, column, or cell to place the insertion point. Or, select neighboring cells to delete more than one row at a time. To select neighboring cells, drag over the cells you want to select. To select individual cells in a table, hold down the Ctrl key (Windows, Linux or Unix) or the Command key (Mac OS) and click on the cells you want to select.
2. Open the Table menu and choose Delete.
3. Choose the item you want to delete.

To join (or merge) a cell with the cell on its right:

- Click inside the cell on the left, open the Table menu, and choose Join with Cell to the Right.

To join (or merge) adjacent cells:

- Select adjacent cells by dragging over them.
- Open the Table menu, and choose Join Selected Cells.

To split a joined cell back into two or more cells:

- Click inside the joined cell, open the Table menu, and then choose Split Cell. &brandShortName; puts the entire contents of the joined cell into the first of the two cells.

Refer to Selecting Table Elements for information on how to select non-adjacent cells, rows, and columns.

### Changing the Default Table Editing Behavior

By default, when you delete one or more cells, &brandShortName; preserves the table's structure by adding cells at the end of a row, wherever needed. This allows you to delete one or more cells but still maintain the table's original rectangular layout, or structure. Otherwise, deleting cells can result in a table with empty spaces, or whose outline appears irregular due to an uneven number of cells.

To change the default table editing behavior, begin from the &brandShortName; window:

1. Open the Edit menu (Mozilla menu on Mac OS X), choose Preferences, and then choose &brandShortName;.
2. Under Table Editing, set the following preference:
   - Make sure that "Maintain table layout when inserting or deleting cells" is checked to ensure that you don't get an irregularly shaped table.
3. Click OK.

See also Setting General &brandShortName; Preferences.

[ Return to beginning of section ]

### Selecting Table Elements

You can use one of two ways to quickly select a table, cell, or group of cells:

- Click in the table, open the Table menu, choose Select, and then choose an item from the submenu. For example, to select a table, click anywhere inside the table, open the Table menu, choose Select, and then choose Table.
- Or, you can use the mouse as a selection tool:
- - To select a group of adjacent cells: click in a cell, and then drag to select the cells you want. Drag the mouse left or right to select a row; up or down to select a column.
  - To select non-adjacent cells: press Ctrl (Windows, Linux or Unix) or Command (Mac OS) and then click inside a cell. Keep pressing Ctrl (Windows, Linux or Unix) or Command (Mac OS) as you click to select additional cells.
  - To extend a selection to include adjacent cells: click inside a cell and then drag over additional cells to extend the selection.
  - To select one or more adjacent columns or rows: drag up or down to select the first column or row, and then drag left or right to select additional adjacent columns or rows. Press Shift and drag to the right to select an entire row. Press Shift and drag up or down to select an entire column.

[ Return to beginning of section ]

### Moving, Copying, and Deleting Tables

To move a table:

1. Click inside the table.
2. Open the Table menu, choose Select, and then choose Table.

- To copy or move the table: Use the Edit menu's cut, copy, and paste options.
- To delete the table: Open the Table menu again, choose Delete, and then choose Table.

### Converting Text into a Table

To convert text into a table:

1. Select the text that you want to convert into a table. Keep in mind that &brandShortName; creates a new table row for each paragraph in the selection.
2. Open the Table menu and choose Create Table from Selection. You see the Convert to Table dialog box.
3. Choose the character &brandShortName; uses to separate the selection into columns, or specify a different character to use. If you choose Space as the separator for columns, choose whether or not you want &brandShortName; to ignore multiple space and treat them as one space.
4. Leave "Delete separator character" checked to have &brandShortName; remove the separator character when it converts the text into a table. If you don't want &brandShortName; to delete the separator character, uncheck this option.
5. Click OK.

Note: Text formatting is removed when the selected text is converted to a table.

[ Return to beginning of section ]

18 June 2005

Copyright © 2004-2005 Contributors to the Nvu Help Documentation Project.