Adding Tables

Adding Tables

Adding Tables

Presenting information in tabular format is often an effective way to convey complex concepts and ideas. NetObjects Fusion makes it easy to add tables to a site. You can select and work with a whole table, just a row, just a column, a single cell, or several rows, columns, or cells. Each of these objects has its own properties panel and its own HTML button, so you can apply HTML to the cell, row, column, or table.

Adding a Table

1. In Page view,choose the Table tool from the Container flyout on the Standard toolbox and draw a box where you want to position the table.

The Create Table dialog appears.

Note: Click the arrow displayed on the Table button to open the Table fly-out, and move the mouse over the available table cells to select how many rows and columns you want. The selected cells change their color into pale blue. Using this method you can select a table with maximum 5 rows and 5 columns.

2. Specify the number of columns and rows in the table.
3. Set the cell padding, which is the amount of space between the contents of a table cell and the cell boundaries. Cell padding is measured in pixels.
4. Set the cell spacing, which is the distance between cells.
5. Click OK.

The properties you set when creating a new table will be saved and used for the next table created.

The table appears with the Table Properties panel. These properties apply to the entire table; you can also select a row, column, or individual cell and set its properties. See Setting Row and Column Properties and Setting Cell Properties.

Each table, column, row, and cell is an individual object. You can view the object hierarchy by choosing Object Tree from the View menu. You can also see which table object is selected by referring to the Object Tree. You can rename tables and cells in the Object Tree, but you cannot rename rows or columns.

You can add an action to a table or cell using the Actions tab on the Properties panel.

Setting Table Properties

1. In Page view, select the table and make sure the General tab of the Table Properties panel is displayed.
2. If the table is embedded in a text box, you can choose Fixed width or Relative width. If the table is not in a text box, these options are not available.
   • If the text box containing the table is sized to the Layout, set to wrap to the browser width, and the MasterBorder margins are set to zero, you can use Relative width to size the table as a percentage of the text box. If a site visitor resizes the browser window, the table will resize accordingly.
   • Use Fixed width to ensure that NetObjects Fusion creates a table that does not resize if the site visitor resizes the browser window.
3. Enter a thickness and color for the table border. Thickness is measured in pixels.
4. Set the Cell padding, which is the amount of space between the contents of a table cell and the cell boundaries. Cell padding is measured in pixels.
5. Set the Cell Spacing, which is the distance between cells.
6. In the Advanced section of the General tab, select Generate non-breaking spaces to prevent empty cells from collapsing.

When this option is selected, NetObjects Fusion inserts a space character in every table cell. If you embed an image in a table cell, the extra space causes a gap between the image and the cell border. To remove the gap, clear this option.

7. To make the table a form, select Table is a form. See Creating a Form.

You can add HTML code to a table. See Working with HTML Directly. You can also convert a table into a Layout Region by right-clicking the table and selecting Convert Table to Layout Region from the shortcut menu. See Converting a Layout Region to a Table.

Setting the Table Background

You can have both a color and a picture in the table background. If the picture has a transparent area, the background color shows through.

1. In Page view, select the table.
2. Click the Background tab on the Table Properties panel and in the Color field, select:
   • Automatic to set the table background to the color specified by its parent object.
   • Color to select a background color from the Color Picker. The selected color appears in the box to the right of the Color field. To change the color, click the box and select a new color from the Color Picker.
3. In the Image field, select:
   • Automatic to set the background to the image specified by the table's parent object.
   • Browse to select an image from the Picture File Open dialog. See Choosing an Image Format. If the picture is smaller than the table, the browser tiles the image. If you select a picture with a transparent color, the background color shows through. To change the image, click the Browse button to the right of the field.

Resizing Table Rows and Columns

In Page view, select the table, and:

• Drag the cell guides on the vertical or horizontal ruler to resize a row or column. This changes the overall table height or width.
• Point to the border of the row or column you want to resize and drag the cell boundary to the new size. If you resize a row, it changes row height and the overall table height.
• For precise sizing of rows and columns, or to make all rows or all columns the same size, see Setting Row and Column Properties.

Inserting a Row or Column

1. In Page view,select the table.
2. Enter the total number of table rows and columns in the Rows field or Columns field.

Additional rows are added at the bottom of the table, and additional columns are added to the right side of the table.

• To insert a row in a specific location, right-click on the highlighted row and select Insert Row Above or Insert Row Below from the menu.
• To insert a column in a specific location, right-click on the highlighted column and select Insert Column Left or Insert Column Right from the menu.

You can also insert rows and columns from the Cell Properties panel.

Removing a Row or Column

1. In Page view,select the table.
2. Enter the total number of table rows and columns in the Rows field or Columns field.

Extra rows are deleted from the bottom of the table, and extra columns are deleted from the right side of the table.

• To delete a specific row, right-click on the highlighted row and select Delete Table Row from the menu.
• To delete a specific column, right-click on the highlighted column and select Delete Table Column from the menu.

Merging and Splitting Table Cells

1. In Page view, select the cells in the table that you want to merge or split. See Selecting Table Cells.

The Table Properties panel will appear.

2. In the adjust area on the Table Properties panel:

• To divide the cell, select Split Cells and enter the number of rows and/or columns you want to split the cell into in the Split Cells dialog. The maximum is 10 x 20.
• To merge cells, select Merge Cells. All borders between the selected cells disappear.

Setting Row and Column Properties

When you select a table row or column, a Row or Column tab is added to the Cell Properties panel.

1. In Page view, select the table.
2. Select arow or column by moving the mouse pointer over the table border and clicking when you see the single-headed arrow. Drag to select multiple rows or columns.

The Cell Properties panel appears with the Row or Column tab added.

1. Set the Vertical and Horizontal Alignment to position objects within cells.
2. Set Row height or Column width.
   • Display the Row tab of the Cell Properties panel. To make all selected rows the same height, enter a number in the height field, then press enter.
   • Display the Column tab of the Cell Properties panel. To make selected columns the same width, enter a number in the Column width field, and press Enter. To size each selected column to its contents, click Fit to Contents.
3. To make a row a header, highlight the row and select Row is a header.
4. Select the Data source context to add Data source content to the table row. See Setting Data Source Contexts.

You can add HTML code to a row or column. See Working with HTML Directly.

Selecting Table Cells

1. Click a cell.
2. Move the pointer over the cell and hold down the left mouse button.
3. When you see the cross-shaped pointer, drag it over the cells you want to select.

Selected cells are highlighted with a border.

Setting Cell Properties

1. In Pageview, click a cell in a table to select it.

The Cell Properties panel appears.

2. If necessary, click the Cell tab.
3. Set the Vertical and Horizontal Alignment for the cell. If the cell alignment is set to Automatic, the alignment of the row or column containing the cell is shown in parentheses. If you select a different setting for the individual cell, it overrides the row or column setting and is shown in parentheses.

• Vertical determines alignment to the top, middle, or bottom of the cell.
• Horizontal determines alignment to the left, center, or right of the cell. If the cell contains text, you can justify it within the cell.

4. Insert new rows or columns to add cells.
5. To apply text styles and formatting to cells, click theFormatbutton. See Designing with Text.
6. To make the cell a form, select Cell is a form. See Designing and Implementing Forms.
7. Select Cell is a header to format the cell as a column or row heading. This makes it easier for people with disabilities to read the table.

You can also add HTML code to a cell. See Working with HTML Directly.

Sizing Cells

To make a table cell shrink to fit the content in the cell:

1. Right-click in the cell you want to size.
2. Select Fit Cell from the shortcut menu.

The cell shrinks to fit the content.

Adding Text and Pictures to Cells

Working in a table cell is the same as working in a text box. You can:

• Add and format text. You can apply formats to all selected cells at one time. See Designing with Text.
• Embed objects. See Embedding Objects in a Text Box.
• Wrap text around objects. See Wrapping Text around Objects.
• Modify text box properties. See Working with Text Boxes.

To select the contents of a cell:

Double-click the cell.

Cross-hatching appears around the selected cell. You can edit the text in the cell or change cell properties.

Sorting Table Data

You can sort the table data by column in ascending or descending order.

1. In Page view, select the table you want to work with.
2. Right click and select Sort Table from the menu.

The Sort Table dialog will appear.

1. In the Sort by section, select the columns you want to sort. You can sort by:
   • Ascending Order (A to Z).
   • Descending Order (Z to A).
   • Ascending Numeric Order (1, 2, 3, 4, 5 . . .).
   • Descending Numeric Order (5, 4, 3, 2, 1 . . .).
2. In the Options area, select:
   • Exclude Cell headers to exclude cells marked as headers from the sort.
   • If you select to Exclude Cell Headers, the cell headers will appear in the Sort By fields.
   • Ignore initial white space sorts the cell data by the first character that is not a space.
   • Sort selected cells only.
3. Click OK.

Importing Table Data

You can import existing table data or display data from a file using the Table (Import Data) tool.

1. In Page view, choose the Table (Import Data) tool from the Standard toolbox and draw a box where you want to position the table.

The Import Table dialog appears.

1. Browse to the location where the file that has the table data you want to import is stored.
2. In the Delimiter drop-down list, choose:
   • Tab to import a tab-delimited (.txt) file.
   • Comma to import a comma-delimited (.csv) file.
   • Custom to specify a new delimiter. Type the custom delimiter in the field next to the Delimiter drop-down. This field is only available if using a custom delimiter.

Only single-character delimited files can be imported. For example, files using the delimiter "/" are acceptable, while files using "//" are not.

3. Complete the Table Properties section.

Exporting Table Data

You can export table data as tab delimited (.txt) and comma separated (.csv) files.

1. In Page view, select the table you want to work with.
2. Right click and select Export Table from the menu.

The Export Table dialog appears.

1. Choose a location to save the file to.
2. Type a file name to save the data as.
3. In the Save as Type drop-down, select:
   • Text (Tab Delimited) to save as a .txt file.
   • CSV (Comma Delimited) to save as a .csv file.

Working with Table Styles

You can quickly give your table a look that matches your site by creating a table style or applying a table style define in Style view.

When creating a table style, you must first define the two style regions you will be working with - the middle and border regions. The middle region consists of all repeating cells and is defined in the Table Properties panel as all cells inside the blue box. The border region consists of all non-repeating cells and is defined as all cells outside of the blue box.

We can further separate the existing table into as many 9 specific regions in which the table style will be applied. These regions can be identified by drawing lines around the middle table style region. It is important to keep these table regions in mind when applying a table style.

• The corner regions are defined by the cross-section of the side regions and do not repeat.
• The top and bottom regions are repeated horizontally over the y-axis.
• The left- and right-side regions are repeated vertically over the x-axis.
• The middle region is repeated to fill the entire selected area without overlapping the border region.

Creating Table Styles

To create a Table Style in Page view:

1. Select the Table you want to work with.

The Table Properties panel appears.

1. Click on the Table Style tab.

In the Style Editor area, click on the blue arrow to display the dimensions selector. The dark blue boxes are the cells in the middle region, and the light blue boxes are the cells in the border region.

2. Drag your cursor to highlight the boxes and click on the box that is in the last (bottom-right) position to set the table style dimensions.

The Style Editor allows you to format a single table region (1x1) up to 25 separate table regions (5x5). The table style can be applied, however, to a table of any size.

3. Drag the blue handles in the Style Editor area to define the middle region.

To apply text styles and formatting to cells, click on a cell in the Style Editor area.

1. To change the cell background color, in the Color field select:
   • Automatic to set the cell background to the color specified for the table.
   • Color to select a background color for the cell from the Color Picker. The selected color appears in the box to the right of the Color field. To change the color, click the box and select a new color from the Color Picker.
1. To change the cell background image, in the Image field, select:
   • Automatic to set the background to the image used by the table.
   • Browse to select an image for the cell background from the Picture File Open dialog. If the picture is smaller than the cell, the browser tiles the image. If you select a picture with a transparent color, the background color shows through. To change the image, click the Browse button to the right of the field.
2. Apply a table style.

To clear a table style and remove all formatting, click the Clear button

Applying Table Styles

To apply a Table Style created in Style view:

1. In Page view, select the Table you want to work with.
2. The Table Properties panel appears.
3. Click on the Table Style tab.
4. In the Table Style section, click on the Site Style drop-down.
5. Select from the list of active site styles.
6. Select a Table Style from the Table Set drop-down.
7. All table styles associated with the selected site style will be available.