Navigation

Tables for pictures and text

Scroll down for information on how to use tables for aligning pictures and text.

Beautiful Baby

Image size at 100%, thereby filling the cell.

Beautiful Baby

Horizontal alignment for this text is set to "Left" (right-click in the cell, then select Cell --> Cell Properties)

Vertical alignment for this text is set to "Top" (right-click in the cell, then select Cell --> Cell Properties)
Horizontal alignment for this text is set to "Right" (right-click in the cell, then select Cell --> Cell Properties)
Horizontal alignment for this text is set to "Center" (right-click in the cell, then select Cell --> Cell Properties)
More can be added here.....

Creating the table

  1. Go to 'Add or Edit Pages' and click on the 'Add New Site Page' button.
  2. Add whatever text you want at the top of the page.
  3. If you don't want any text, then press enter in the text box three times, select the second line then proceed.
  4. Where you want to create a table, click on the Table icon. A dialogue box pops up.
    1. Select the number of rows you want.
    2. Select how many columns you will use, add two more (one for the left and one for the right, as a 'buffer'). This is optional.
    3. Under width, type in 100%.
    4. Set the border size to zero. This removes the border from the site but you will still see light border boundaries in Edit mode. Click OK. (Note: If you want to see the border on the site, do not use buffer columns.)
  5. Click and drag to select the entire left-most buffer column. Right-click, and then select Cell --> Cell Properties. Type '5' for Width and change the drop-down to 'Percent'. Click OK.
  6. Repeat step #4 for the right-most buffer column.
  7. Click and drag to select all of the middle columns (but not the outside buffer columns). Go to 'Cell Properties' and change it to a percentage (divide the number of columns into 90, use that number). Click OK.
    1. For example, if you want 3 columns of images, change them to 30% each; for 2 columns of images, change them to 45% each, etc.
    2. If you don't like this look, if it spreads your images too far apart, then just increase the width (percentage) of the buffer columns in steps #4 & #5, and reduce the width (percentage) of the middle columns accordingly.
  8. Now you can input whatever content you want to the middle columns. Make sure that the width and height of the images are set to 100% x 100%. If you need to add more rows, it will retain your formatting.

Filling the table

  1. Select any cell in the table.
  2. Click on the image icon.
  3. Browse the server.
  4. Select your image.
  5. Click Send to ckeditor.
  6. Put in 100% for both horizontal and vertical.
  7. Click OK.

Adding new rows or columns

  1. Right click on the table.
  2. Select 'Row' and insert a new row (either before or after the one in which your cursor is).
  3. Alternatively, if the cursor is in the last cell of the last row, hitting the Tab button will start a new row.
  4. Also from right-clicking on the table, you can add a new column in the same way.

Setting the position of the text within the cell

  1. Right click on the table.
  2. Click on Cell.
  3. Click on Cell Properties.
  4. Set the position of the text or image within this cell (see examples above).