KNOWLEDGE CENTER

 

 



 

  

 

 

 

 

      

 Insert a Table; Step One: Common Properties

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Follow these steps to place a Table into one of your web pages.

 

To make the Table have a colored background, colored border, or to place an image

 

in the background, be sure to see the page "Insert a Table; Styles," or click here.

 

 

 

 

 

 

 

   1.    To add a Table, click your cursor in an Article where you want the Table to be.  Then, click the  icon.  

 

   2.     Webtreepro brings up the Table Properties dialog box with its two tabs, Common Properties and Styles seen below.  The first

            tab is where you'll design the basic structure of your Table.

 

   3.    To select your desired number of Rows and Columns, click on the green bar and slide it.  You can select up to ten Rows and

           Columns at this time.  If more Rows or Columns are needed, don't worry.   These can be easily added to theTable at a later

           time, as explained in the page Edit or Delete a Table.  

 

      •  If you want to see that information now, click here.

 

 

 

 

 

 

 

 

 

   4.   In the Common Properties tab that is located in the center of the screen,  Panel Layout allows you to adjust the Table's width to fit in

         your selected panel, or leave it to default which is 100%.  If you'd rather work with pixels, use the Percent dropdown to choose

          "Pixel" instead.

 

   5.   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 will take up whatever the percentage is within the panel that you have chosen.

 

      • To use the Pixel option, you'll want to find the pixel width for the panel where you'll put your Table, so that your Table will fit within the panel.  All you need to do is click the "Label" icon   which is located in the first section of the Editing Toolbar at the top of your screen.  The pixel width will appear in the upper left corner of each panel, as seen below.

 

      • To exit, click on the "Label" icon, again.

                                                                                                                                                                           

 

   6.   Table 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 Table to the left, right, or center within the panel.

 

   7.   Go to the right to Spacing.  This tool will make whatever Content you place inside the Table have a neat, sharp finish within the Cell

          Experiment with the spacing to see how many pixels works best.  The explanations below will help.

 

      • Within cells lets you control the number of pixels between any Content in the Cell (text, images, etc.) and the

                    edge of the Cell.  This is the "padding” around the text or image that will be placed inside the Cell.

 

      • Between cells lets you control the number of pixels between each Cell, in both horizontal and vertical directions. 

 

   8.   Preview is located in the top right of the screen.  As you build your Table, it will give you an idea of how the Table and Cells will look.

 

Here is the Preview of two examples of Cell Spacing.          

 

 

 

 

      • Notice the left example of Preview represents the default view.  This is the Preview of Spacing when nothing has been selected.  If you want a different spacing than what is shown on the left Preview example, change the number of pixels in the Spacing box.

 

      • On the right side, the Preview shows more padding within the cells (the cells are larger), and also, between the cells (the white spaces in between are larger).  See the Spacing box with the selections that were made.

 

      • These Preview examples give you an idea of how your Spacing settings can individualize your Table.  To see how different settings will affect the look of the actual Table, see below.

 

Here is a basic Table with the default spacing: 

                                                                                                                                                                                 

 

This is the same Table but with different spacing within the cells.

                                                                                                                                                                                  

 

Here is the basic Table, again: 

 

 

This is the same Table with different spacing between the cells.

 

 

 

    9.   Border thickness:  Webtreepro suggests that you enter a number for your Border thickness.  If you don't choose a Border

           thickness, and leave the setting at "0," the results will cause your Table to have an invisible 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 Table a colored Border, you must select a Border thickness at this time.

 

This Table  has a  Border thickness of 1 pixel.

       

 

 

  The Table below has no Border thickness selected, but each Cell is shown.

We'll explain everything about Cells in All about Cells,

 or if you want to see that page now, click here.

 

                 
                          

 

 10.   Cell Widths:  The default setting causes the Cells to be split evenly across the width of the Table, as shown above. You can choose

          other Cell widths by entering a percentage in the Cell Width box at the bottom of the screen, seen in this example.

 

  Cell Width choices

 

 

   

 

 

 

Cell Width results  

25% 75%

   

         
 

  

   11.   You are now ready to go to the Styles tab, so you'll need to click on it.  (Styles will be explained in the next page of this

            section.  To see the page Insert a Table; Styles now, click here.)

 

      • If you click the OK button instead, you will go back to your working page.  The Table will be on the page, but it will have no Background color or Border color. 

 

  12.   If you want to select Background colors and a Border, but hit the OK button by accident, just click in the Table and then, make a right

           click to see the Page Details window.  Choose Table.  The Table Properties flyout appears. 

 

  13.   Select Table Properties  which will bring you back to the "Common Properties" window.   From there, you can choose "Styles" and

           then make your color and border choices.

 

                                                          

Page Details

 

 

 

 

 

 

 

 

 

 

 

 

Table Properties flyout

 

 

 

 

 

    Quick Video Link>>Table Basics   Quick Video Link>> Tables-Create Columns   Quick Video Link>>Tables-Callout Boxes