KNOWLEDGE CENTER

 

 



 

 

 

 

 

   

Let's Build a Form; Common Properties

 

 

 

 

 

Webtreepro recommends placing a Table inside your Form. 

 

If you insert a Table,

 all of your Form Building Tools and your requested information will be organized, and your Form will have a polished appearance. 

 

This page is devoted to only the Common Properties tab. 

 

The Styles tab will be discussed next. 

Styles is where you can add Background Color or Background Images

 to your Form. 

 

To see more details about adding color or images, 

visit the page "Let's Build a Form; Styles," or click here.

 

 

 

 

 

 

 

 

 

If you have come to this page without reading Form Building, Step One, you may want go to that page where you will find instructions on how to create a Form.  If so, click here. 

 

 

   It’s now time to build an actual Form. 

 

  1.   Go to your existing Form, the box will be surrounded by a blue dotted line, and click inside it.  Then, go up to the  

         Editing Toolbar and click the Table icon .

 

   2.   Webtreepro will bring up Table Properties window, seen below.

 

 

 

 

 

   3.   Select how many Rows and Columns are needed by clicking on the green tab and sliding it left or right.  You can select up to ten

         Rows and Columns.  If, at this time, you don't know exactly how many Rows and Columns will be needed, don't worry.  Rows

         and/or Columns can easily be added or deleted at any time.  See below.

 

 

   4.   To add or delete Rows and Columns, follow these steps:

 

      •  Click the cursor in your Table and right-click.  Webtreepro brings up the Form Details window. 
        •  
      • Move the cursor to Table, click, and scroll to your right.  Select an option.

 

 

 

 

 

 

 

 

 

 

 

  

 

                                                                   

 

   5.   In the Common Properties tab that is located in the center of the Table Properties window, Panel Layout allows you to adjust

         the Table's width to your needs, or leave it to default which is 100%.

 

          • Table Width within Panel gives you a choice of determining the Table's width in percentages or pixels. If you choose to work with the percent option, the width of the Table/Form will take up whatever percentage within the panel that you have chosen.

 

          • To use the pixel option, you'll probably want to find the pixel width for the panel so that your Table/Form will fit within the panel.  

          • All you need to do is click the Label icon    which is in the first section of the Editing Toolbar at the top of your screen.  Each panel, then, will show its pixel width in the upper left corner of the panels, as seen below.  To exit, click on the Label icon, again.

 

 

   6.   Underneath Table Width is Alignment within Panel:  Select this option, if you have chosen a width less than 100% or a pixel

          width that is smaller than the panel.  The Table Alignment can place your Form to the left, right, or center in the panel.

 

    7.   Now that you have chosen the number of Rows and Columns and you have selected your Panel Layout options, you can go to

          Cell Spacing.      

  

                        Here are two examples of Cell Spacing.        

 

 

 

Notice the left example represents the default view. 

The Preview image is an example of Spacing

when nothing has been selected.

 

On the right side, this example shows  padding within the Cells.

The white areas between the Cells show more spacing. 

These examples give you an idea of how your Spacing settings can individualize your table. 

To see actual Tables and how different settings affect the look of the Table, see below.

 

 8.   If you want a different spacing than what is shown on the left Preview example, select Spacing.

 

      • Within cells lets you control the number of pixels between any content in the cell (text, images, etc.) and the inside edge of the cell. This is the "padding” around the text or image that is within the cell.

 

      • Between cells lets you control the number of pixels between each cell, in both horizontal and vertical directions.  Examples are seen below.

 

 Here are the Cell properties of two Tables.  The right Table shows different spacing within the cells. 

 

 

These are the Cell properties of the same Tables.  The right Table shows different spacing between the cells.

 

 

   9.   Border thickness:  Leaving the setting at "0" will cause your Form to have an invisible (Transparent) border, and may give

          it an "unfinished" look.  Any number greater than zero will create a Border of that many pixels. 

 

      • If you have decided to give your Form a colored Border, you must select a Border thickness at this time.

 

 This Table has a Border thickness of 1 pixel.

 

  

     

 

     

  

 

This Table has no Border thickness

 

           
       

 

 

 

      •   If you want your table to be borderless but also want to use a background color, be sure to enter a space in a few of the

                      cells. Otherwise your table will not show a background color when in Published Mode.

 

  10. Cell Widths:  The default setting causes the Cells to be split evenly across the width of the Form, as shown above. Other

         selections may be made by entering a percentage in the Cell Width box at the bottom of the Common Properties screen, seen

         below.   Enter 25% for Cell 1 and 75% for Cell 2.  The Cell widths, and their results are shown below.

 

  

 
25%  75%

 

 

  11.   You are now ready to go to the Styles tab of the Table wizard.  Because you have inserted a Table into your Form, you can

         now add Background Color, an Image, and/or a Border Color to your Form.  We will discuss colors and images in the

         next page of this section, Let's Build a Form; Styles; Adding Color and Images, or you can click here to see

         the page now.

 

 

 

Note: 

 

          If you click the OK button, you will go back to your working page where your Table is ready to be filled with

          Form controls.  The Form will be placed in the page, but it will have no Background Color, Image or

          colored Border. 

 

          If you wanted to add color and a Border, but hit the OK button by accident, just click in the Table and then,

          right click to see the Form Details window.  Choose Table. 

 

          Select Table Properties which will bring you back to the Table Common Properties window.  From there,

          you can choose the Styles tab, and make your color choices.

 

                                                               Form Details                                  Table Properties flyout

 

 

 

 

 

 

 

 

 

 

     

To see more information about Cells, go to the page All About Cells, or click here.

            

 

   Quick Video Link>>Table Basics