Available in SiteSpinner V2 and Web Engine V2.

This tutorial assumes that you are already familiar with many V2 operations including Text, Titles, Images and Objects.

A HTML style Table provides a convenient means to group, position and align Objects Horizontally and Vertically. The Table Editor uses a visual editor to quickly create a HTML style table. Most Table operations are supported including Spacing, Padding, Outline, Column Spans, Row Spans and Titles. You can also set background and alignment operations to the entire Table as well as to individual cells.
A new Table can be created by selecting the Blue Grid button on the Component Toolbar at the Left or from the Object menu. Since the Table Editor is fairly large you may wish to move the dialogs or this text in order to follow the instructions.

  1. Select the blue Table button on the left tool-bar and then click anywhere on the work-window to place your Table.
  2. Drag one of the corners of the Table to make it a bit larger. You should now have a square, four cell table. Double click the table to open the Table Editor.
  3. The number of cells can be changed at any time by increasing the Rows and Columns in the Cells section of the Table Dialog.
  4. Adjust the Cells to create 3 horizontal columns and 2 vertical rows - you should have 6 cells.
  5. Close the Table Editor and select the Text Editor to create a new Text Object. Enter the following simple text: "This cell spans 2 columns". Select 'Save and Close' to exit the Text editor.
  6. Now drag your text object and place it into the top, left table cell.
  7. Double click on your table to open the Table Editor, select the top left table cell in the preview pane and increase the Span Cells column to 1. Close the Table Editor.
  8. Open the Title Editor and enter the following title: "This title spans two rows". Exit the Title editor. Drag your text into the second cell of the first row.
  9. Select the Quick Properties dialogue from the left tool-bar. The Quick Properties dialogue should display the Object in the selected cell.
  10. With the Title object selected, enter a rotation of 90 degrees in the Quick Properties dialogue. This will rotate the Title within the cell.
  11. Now open the Table Editor, select the cell with the Title in it and increase the Span Cells: Row to 1.
  12. Under Dimensions, set the width to 100 and select %.
  13. You can assign a Shading component to add a background and use the Color operation in the Cell Dialog to add a specific background color to an individual cell.
  14. Close the Table editor and use the Align tools (bottom tool-bar) to make your table flush with the top left corner of the work-window.
  15. Your Table should now be similar but not identical to the finished example at the bottom. Double click your Table again and adjust the Outline, Spacing and Padding to get a similar result.
  16. Now Preview your page. Try resizing your browser window and note how the Table dynamically scales to fit it.
Use the Table Dialog help buttons for more detailed instructions on individual operations.
Virtual Mechanics
< tutorials home
TM & © 1998 - 2004, Virtual Mechanics, all rights reserved.

This cell spans 2 columns