Adding Tables
Contents
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
- 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.
- Specify the number of columns and rows in the table.
- 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.
- Set the cell spacing, which is the distance between cells.
- 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
- In Page view, select the table and make sure the General tab of the Table Properties panel is displayed.
- 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.
- Enter a thickness and color for the table border. Thickness is measured in pixels.
- 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.
- Set the Cell Spacing, which is the distance between cells.
- 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.
- To make the table a form, select Table is a form. See Creating a Form.
- In Page view, select the table.
- 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.
- 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.
- 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.
- In Page view,select the table.
- Enter the total number of table rows and columns in the Rows field or Columns field.
- 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.
- In Page view,select the table.
- Enter the total number of table rows and columns in the Rows field or Columns field.
- 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.
- In Page view, select the cells in the table that you want to merge or split. See Selecting Table Cells.
- 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.
- In Page view, select the table.
- 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.
- Set the Vertical and Horizontal Alignment to position objects within cells.
- 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.
- To make a row a header, highlight the row and select Row is a header.
- Select the Data source context to add Data source content to the table row. See Setting Data Source Contexts.
- Click a cell.
- Move the pointer over the cell and hold down the left mouse button.
- When you see the cross-shaped pointer, drag it over the cells you want to select.
- In Pageview, click a cell in a table to select it.
- If necessary, click the Cell tab.
- 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.
- Insert new rows or columns to add cells.
- To apply text styles and formatting to cells, click theFormatbutton. See Designing with Text.
- To make the cell a form, select Cell is a form. See Designing and Implementing Forms.
- 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.
- Right-click in the cell you want to size.
- Select Fit Cell from the shortcut menu.
- 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.
- In Page view, select the table you want to work with.
- Right click and select Sort Table from the menu.
- 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 . . .).
- 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.
- Click OK.
- In Page view, choose the Table (Import Data) tool from the Standard toolbox and draw a box where you want to position the table.
- Browse to the location where the file that has the table data you want to import is stored.
- 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.
- Complete the Table Properties section.
- In Page view, select the table you want to work with.
- Right click and select Export Table from the menu.
- Choose a location to save the file to.
- Type a file name to save the data as.
- 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.
- 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.
- Select the Table you want to work with.
- Click on the Table Style tab.
- 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.
- Drag the blue handles in the Style Editor area to define the middle region.
- 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.
- 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.
- Apply a table style.
- In Page view, select the Table you want to work with.
- The Table Properties panel appears.
- Click on the Table Style tab.
- In the Table Style section, click on the Site Style drop-down.
- Select from the list of active site styles.
- Select a Table Style from the Table Set drop-down.
- All table styles associated with the selected site style will be available.
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.
Resizing Table Rows and Columns
In Page view, select the table, and:
Inserting a Row or Column
Additional rows are added at the bottom of the table, and additional columns are added to the right side of the table.
You can also insert rows and columns from the Cell Properties panel.
Removing a Row or Column
Extra rows are deleted from the bottom of the table, and extra columns are deleted from the right side of the table.
Merging and Splitting Table Cells
The Table Properties panel will appear.
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.
The Cell Properties panel appears with the Row or Column tab added.
You can add HTML code to a row or column. See Working with HTML Directly.
Selecting Table Cells
Selected cells are highlighted with a border.
Setting Cell Properties
The Cell Properties panel appears.
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:
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:
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.
The Sort Table dialog will appear.
Importing Table Data
You can import existing table data or display data from a file using the Table (Import Data) tool.
The Import Table dialog appears.
Only single-character delimited files can be imported. For example, files using the delimiter "/" are acceptable, while files using "//" are not.
Exporting Table Data
You can export table data as tab delimited (.txt) and comma separated (.csv) files.
The Export Table dialog appears.
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.
Creating Table Styles
To create a Table Style in Page view:
The Table Properties panel appears.
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.
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.
To apply text styles and formatting to cells, click on a cell in the Style Editor area.
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: