ITS

Information Technology Services
Information Technology Services

Tables


Tables consist of multiple cells arranged in rows (going across the page) and columns (going down the page).  Before you create a table, look at the information that you want to put in the table, how it is best laid out, and how many rows and columns you will need.  If you need to add one or more row or column to your table at a later date then this can be done easily.

Best Practice: Tables should only be used for displaying data. As a general rule, if it would make sense to manage the data that you are displaying in a spreadsheet, then using a table for it on your site makes sense. However, tables should never be used as a means of positioning content on a page. For alternative page layout options, see our Site Enhancements tutorials, specifically Page and Column Layouts.

 

Creating a Table

  1. Go to New Draft or Edit Draft for the page where you would like to add a table
  2. In the WYSIWYG editor, select the Table icon, shown below.

screenshot of location of table button in editor

  1. The Table Properties screen will open
    • Enter the number of rows
    • Enter the number of columns
    • Headers can be either the top row or left column, or both. They will be shaded and the text bolded and centered. 
    • You can specify the height of the table.  If not specified it will automatically be spaced depending on the contents of the table.
    • Choose the width of your table.  This can be expressed as percentage, px, in, cm, mm, em, ex, pt, or pc
    • If you would like to add a caption for your table enter it. It will appear beneath the table
    • Click the OK button
Cell spacing is the amount of white space inside each cell and cell padding is the amount of white space around the border of each cell. Changing these values, or changing the value of the border field will not result in an increase to white space in or around the cells and will not result in a border being added. The table styling has been defined in the WebPublish theme, so these specifications will be stripped out once the table is saved.

screenshot of table properties form

  1. The blank table will be displayed. Note: the table does not appear in the WYSIWYG exactly as it will appear on your page. Once saved, additional formatting will applied to the table.
    • enter the text for each cell
    • note that the caption is displayed at the top of the table.  Once saved it will be displayed at the lower left

screenshot illustrating above step

  1. While entering your text:
    • note that the text in the header row and header column is bold and centered
    • Save your file 

screenshot illustrating above step

  1. Your page will be displayed.
    • The Caption is below the table
    • Since the width was set to 80%, the table does not extend from the left margin to the right margin;

Properties

Once the table has been created you can still change how the table looks by changing the properties.  Depending on the change you want to make you can change the Table Properties apply to the entire table, or the Cell Properties.

Table Properties

  1. Right mouse click anywhere in the table
    • Select Table Properties

    screenshot illustrating above step

  2. The Table Properties screen will open
    • Note that Rows and Columns are greyed out.  These fields cannot be changed here. Edit the table to add or delete rows and columns.
    • All other fields can be changed.  From the Headers field choose no Headers or only Row or Column
    • From the Border size increase the border or remove the border entirely
    • Change the Align field from left to Center
    • Increase or decrease the Width and height of the table
    • Cell spacing  is used to add extra space around the border of the cells within the table
    • Cell padding is used to add extra space within the cell
    • When finished Click the OK button.  Your changes will be applied to the table immediately. 

    screenshot illustrating above step

Cell Properties

  1. Right mouse click in the cell you want to change the properties of
    • Select Cell
    • Select Cell Properties

    screenshot illustrating above step

  2. The Cell  Properties screen will open
    • Change the Width of the cell.  Choose between pixels (px) or percent (%) for measurement or  in, cm, mm, em, ex, pt,  pc
    • Change the Height of the cell. 
    • Turn Word Wrap on or off
    • Horizontal Alignment can be left, center or right
    • Vertical Alignment can be Top, middle, bottom or baseline
    • Cell Type can be changed from Data to Header and vice-versa
    • Column span allows the cell to extend across multiple columns.   Cell Merge can accomplish the same results.
    • Row span allow the cell to extend across multiple rows.  Cell Merge can accomplish the same results.
    • Background Color and Border Color can be chosen from the color pallet
    • Click OK to save your changes.

    screenshot illustrating above step

Editing a Table

Insert and Delete Rows

  1. Right click any cell within the row you want to work with and select Row from the menu 
    • Choose to Insert row before the current row
    • Choose to Insert row after the current row
    • To Delete the current row click Delete Rows (this happens immediately)
    • Note:  to add an extra row to the end of the table you can Insert row after or, position the cursor in the last cell on the last row, and click the tab key. 

    screenshot illustrating above step

Insert and Delete Column

  1. Right click any cell within the column you want to work with and select Column from the menu
    • Click Insert Column Before to insert a blank column to the left of the current column
    • Click Insert Column After to insert a blank column to the right of the current column
    • Click Delete Columns to delete the current column.  This happens immediately.

    screenshot illustrating above step

Insert Cell

  1. Right click any cell you want to work with and select Cell from the menu
    • Insert a Cell Before creates a blank cell before the current cell.  Note this extends the row to accommodate the extra cell but not the entire table.
    • Insert a Cell After creates a blank cell after the current cell. Note this extends the row to accommodate the extra cell but not the entire table.
    • Delete Cells removes the cell.  Note this indents the table. 
    • Depending on what you want to do, better results may be obtained by using Merge and Split

    screenshot illustrating above step

Merging Cells

  1. Merging two or more cells allows you to combine the cells without changing the layout of the table. You can merge cell within a row or you can merge cells within a column
    • Select the cells you want to merge
    • Right click within one of the cells
    • From the menu select merge right or merge down

    screenshot illustrating above step

Splitting Cells

  1. Splitting a cell allow you to create two cells where one existed before.  It splits the cell in half. You can split a cell  within a row or you can split a cell within a column 
    • Split cells horizontally will create two columns within the cell
    • Split cells vertically will create two rows within the cell

    screenshot illustrating above step

Table Dimensions

  1. Table dimensions can also be edited
    • To change the size of the table, click on the table.  Handles will be displayed that can be dragged to change the dimensions of the table. 
    • To change the inner row/column borders hover the mouse over the cell border until the crosshairs appear. 
    • Drag the border left or right

    screenshot illustrating above step

Formatting the Contents of a Table

  1. To change the properties of  the text in a cell highlight the text and from the toolbar menu select the appropriate tool.  Any of the tools can be used within a cell. 
    • Size to change the size of the font
    • Font to choose a different font
    • Select font color to choose a different color
    • select background color to change the background