Tables

Standard Tables

Standard table operations allow you to place and modify simple tables in your web site.


  
Adding a Table

  • Open the Palette tab of the Quick Panel.
  • Select the Tables group.
  • Drag the Table icon  [IMAGE] to the location in your web page that you want your table to appear.
  • A one row, two column table will appear.

[IMAGE]

 Example 
 
Adding a Row Below an Existing One

  • Open the Palette tab of the Quick Panel
  • Select the Tables group.
  • Drag the Row Below  icon [IMAGE] over the row you want your new row to appear under.
  • The new row will appear under the one you dropped it on.
[IMAGE]

 Example 
  
 
Adding a Row Above an Existing One

  • Open the Palette tab of the Quick Panel
  • Select the Tables group.
  • Drag the Row Above icon [IMAGE] over the row you want your new row to appear above.
  • The new row will appear over the one you dropped in on.
[IMAGE]

  
Example 
 
Adding a Column to the Left of an Existing One

  • Open the Palette tab of the Quick Panel
  • Select the Tables group.
  • Drag the Column to Left icon [IMAGE] over the column you want your new column to appear to the left of.
  • The new column will appear to the left of the one you dropped it on.

 [IMAGE] Note: It's advisable that you use table properties to adjust column widths after completing this operation.

[IMAGE]

 Example 

Adding a Column to the Right of an Existing One

  • Open the Palette tab of the Quick Panel.
  • Select the Tables group.
  • Drag the Column to Right [IMAGE] icon over the column you want your new column to appear to the right of.
  • The new column will appear to the right of the one you dropped it on.

 [IMAGE] Note: It's advisable that you use table properties to adjust column widths after competing this operation.  

[IMAGE]

Example
   
 
Table Properties

Open Table Properties dialog box.

  • Place the cursor in a cell of the table you want to change.
  • Roll mouse over Table, scroll and click Table Properties.
  • The Table Properties dialog box will appear.
  • Changes made in this dialog will appear instantly in the web page. Clicking Cancel will undo the changes and set the web page back to its original state.
Table Widths
  • Unit- This is the unit of measure for the column widths.
    • % - column widths are measured in a percentage of the overall width of the table. The total width of all columns must total 100. If they don't total 100, the total value will be red and pressing OK will reset all changes.
    • px - column widths are measured in pixels. The total and table width will be automatically calculated based on the values provided.
  • Column N - there will be one column field for each column in the table. This is where you can specify the width of each column in the Unit specified above.
  • Table Width - when using % (percent), this specifies the overall table width as a percentage of it's surrounding object (ie. cell, floating box, edit area).  When using px (pixels), this value can't be changed but it will display the total width of the table in of pixels
Table Heights

  • Row N - there will be one row field for each row in the table. This is where you can specify the height of each row in pixels. If these values are 0, the height will be determined by browser defaults and content.
  • Table Height - will reflect the total height of the table in pixels. This value is calculated and can't be modified directly.

Spacing

  • Cell Spacing - specifies the space between each cell of a table, both vertically and horizontally. 
 
[IMAGE]

[IMAGE]

[IMAGE]

[IMAGE]
Cell Properties

Open Cell Properties dialog box.
  • Place the cursor in a cell of the table you want to change or select a group of cells to change by dragging your mouse over those cells.
  • Roll mouse over Table, scroll and click Cell Properties.
  • The Cell Properties dialog box will appear.
  • Changes made in this dialog will appear instantly in the web page. Clicking Cancel will undo the changes and set the web page back to its original state.

Change Borders

When changing borders, the example on the right side of the dialog box will reflect the changes.

  • Select the border style to use for your border changes.
    • Border Style - this box allows you to pick solid, dashed or dotted lines for you border.
    • Border Width - this drop-down allows you to pick a width for your border.
    • Border Color - clicking on this will display the Color Picker so you can pick a color for your borders
    • Border Radius - This allows you to specify the radius of cell corners if you make a corner.
  • Use the various buttons that surround the example on the right side of the dialog box to add or remove a border or rounded corner. These buttons toggle so clicking it once will add a feature and clicking it again will remove the feature. The style of the border will always be based on the selection from step 1.
    • [IMAGE] - Makes the top left corner of the selected cells have a rounded corner.
    • [IMAGE] - Makes the top right corner of the selected cells have a rounded corner.
    • [IMAGE] - Makes the bottom left corner of the selected cells have a rounded corner.
    • [IMAGE] - Make the bottom right corner of the selected cells have a rounded corner.
    • [IMAGE] - Make the top edge of the selected cells have a border.
    • [IMAGE] - Add horizontal borders between cells that are selected.
    • [IMAGE] - Make the bottom edge of the selected cells have a border.
    • [IMAGE] - Make the left edge of the selected cells have a border.
    • [IMAGE] - Add a vertical borders between cells that are selected.
    • [IMAGE] - Make the left edge of the selected cells have a border.
Other Cell Properties

  • Cell Shade - clicking on this will open the Color Picker so you can change the background shade or color of the selected cells.
  • Cell Padding - you can either select or type in the cell padding in pixels. This is the space the will exist between the inside edge of a cell the the content.
  • Cell Alignment - defines the position of the content placed into a cell. Click on these buttons to change the alignment. The currently selected alignment will show the button depressed.
    • [IMAGE]- Content will be placed in the upper left corner of the cell.
    • [IMAGE]- Content will be centered horizontally and aligned to the top vertically.
    • [IMAGE]- Content will be placed in the upper right corner of the cell.
    • [IMAGE]- Content will be centered vertically an aligned to the left edge horizontally.
    • [IMAGE] - Content will be centered both vertically and horizontally.
    • [IMAGE]- Content will be centered vertically and alighted to the right edge horizontally.
    • [IMAGE]- Content will be aligned to the lower left corner of the cell.
    • [IMAGE]- Content will be centered horizontally and aligned to the bottom of the cell.
    • [IMAGE] - Content will be aligned to the lower right corner of the cell.
 [IMAGE]

[IMAGE]

[IMAGE]
Split Cell

You can split a cell into two cells while leaving the cells in the rows above and below unmodified.

  • Place your cursor in the cell you want to split.
  • Roll mouse over Table, scroll and click Split Cell.
  • The cell will be split into two.
 
 [IMAGE]

Example
  
  

Merge Cells

You can merge two or more cells in the same row into a single cell leaving the cells in the rows above and below unmodified.

  • Drag your mouse over two or more cells in the same row.
  • Roll mouse over Table, scroll and click Merge Cells.
  • The cells will be merged.
 [IMAGE] Note: This option will only be available if you have two or more cells selected. 
 [IMAGE]

Example 
 

Delete Rows

  • Place your cursor in a cell of the row you want to delete or select cells from multiple rows to delete more than one row.
  • Roll mouse over, scroll and click Delete Rows.
  • The row or rows will be deleted.
 
[IMAGE]

Before:

Example 
  

After:

Example
 

Delete Columns

  • Place your cursor into a cell of the column you want to delete or select cells from multiple columns to delete more than one column.
  • Right Click.
  • From the drop-down menu, select Delete Columns.
  • The column or columns will be deleted.
 
[IMAGE]

Before:

Example
 
  

After:

Example