Web Page Editor: Tables

Table Properties:

In the Table Properties you can add even more attributes to your table. By using the "Table Properties" feature you can add attributes such as Auto fit, Change the Alignment, border, Margins, Background, padding, and you also have the option to add CSS styling if you are advanced in HTML and CSS. To access the Table Properties feature, select the table you want to modify. Then click the "Edit Table/Cell" icon and select "Edit Table". This will bring up the Table Properties window.

• Autofit: The autofit properties allow you to determine the dimensions of a cell/table in relation to the content of the cell/table or size of the website template you are using. You can set the autofit properties for both width and height. The AutoFit properties can be applied either to a single cell by clicking inside a specific cell or the properties can be applied to the entire table by selecting the entire table.
  
  
  
  
  
  
  • AutoFit to Contents: The cells and table will become larger or smaller based on the content in the cells. (Note: The table is still limited to the total width of the page. The height of the page is expandable, so there is no limit to the height (or at least no one we've found yet).
    
    
    
    
    
    
  • Fixed Table Width/Height: This setting allows you to fix the size of the cell or table to a specific dimension. When using this setting, the cell or table size will not change regardless of the content in the cells or space allotted in the website template you are using. (Warning: Setting the width to a high number can cause the table to extend beyond the width of the website template. This can cause unwanted effects and an unattractive look.)
    
    
    
    
    
    
  • AutoFit to Window: This setting determines the size of the cell and table in relation to the space allotted by the website template you are using.
    
    
    
    
    
    
    
    
    
• Properties: Under the Properties tab you can determine the alignment, margins, borders, background, cell spacing and padding, and whether cells will collapse (not be displayed) if they have no content. The changes made to the settings under the Properties tab are applied to the entire table, and not individual cells.
  
  
  
  
  
  
  • Alignment: The alignment property determines whether the table is displayed on the page on the left, right, or centered.
    
    
    
    
    
    
  • Margin: The margins further allow you to determine the placement of the table adding space to the left, right, top, or bottom of the table. When you change the margins it is as though you are adding to the size of the table. This new, invisible part of the table then effects the placement of the table. So, if you put a margin of 50px for the left margin, it is as though the table now extends another 50 pixels to the left of table border. If you align your table to the left, then the table will simply be displayed 50 pixels away from the left side of the page. If you have the table aligned to the right, adding a left margin of 50px will may have no effect on the placement of the table if there is empty space to the left. (Note: If you have the table set on AutoFit to window for the width and then add to the left margin, the table will extend off the normal template page and there may be unexpected layout issues)
    
    
    
    
    
    
  • Borders: A border can be added around the entire table in addition to any borders you may already have around each cell. (Note: If you chose a border thickness that is different from the border thickness you chose for the cells, the thickness of the cell borders will be changed so they are the same as the thickness of the table border.)
    
    
    
    
    
    
  • Background: The background feature allows you to either set a color or picture as the background of the entire table. To set a color for the background, click the "Pick" button and choose the color you want for the background (see figure 1). If you would like a picture for the background, click the "Image" link and the "Backgournd Image" window will come up (see figure 2). In the "Image Source" section click the folder icon on the very right. This will open the "Asset Manager" window. In this window you will see a list of all the graphics you have uploaded. Once you have selected your image click the "ok" in the bottom, right of the window. (For more information about the Asset Manager and uploading files, please visit the "Asset Manager" section of the help pages.)
    
    Once you have selected the graphic, you can select whether you want the graphic to repeat (tile) or be displayed only once. You can also determine the alignment of the picture. Once you are finished, click the "ok" button on the bottom, right of the window.
    
    (*Note: You can use both a background color and picture at the same time.)
    
    (figure 1)
    
    
    
    (figure 2)
    
    
    
    
    
  • Collapse: The collapse feature determines whether cells are displayed if they are not used. If you select "Yes" for the Collapse feature, the cells (and their borders if the table has borders) will not be displayed if no content is in the table. If you select "No" for the Collapse feature, all cells and their borders will be displayed whether there is content in the cell or not.
    
    
    
    
    
    
  • Cell Spacing: By adding spacing, empty space will inserted between the cells of the table.
    
    
    
    
    
    
  • Cell Padding: Padding is the space between the walls of the cells and content inside the cells.
    
    
    
    
    
    
    
    
    
• Style:Under the Style tab you can use CSS to format the table. CSS styling should only be used if you are advanced in HTML and CSS.
  
  
  
  
  
  
  • *Note: Support for teaching, developing and debugging CSS is not included in the regular OurChurch.Com technical support. If you with so to use CSS and need assistance, OurChurch.Com is available to help with the purchase of maintenance hours.
    
    

When you have made a change to the properties of the table, click the "Apply" button at the bottom, right of the Table Properties window (see figure 3) and the changes will be applied to the table without closing the Table Properties window. This allows you refine changes as you go without having to continually re-open the Table Properties window. When you have completed modifications of the table properties, click the "OK" button at the bottom, right of the Table Properties window (see figure 4). This both applies the changes (as with the "Apply" button") and closes the Table Properties window.