Page Settings

  • Show menu: true
  • Use horizontal menu: true
  • Show sidebar: no
  • Skip to main content

    Tables

    Tables can be used in certain situations where you need to organize specific pieces of content, such as course schedules.  See the Best Practices Web Page Content page for recommended uses for tables and look at the Layouts and Style Guides section for table examples in the Offices and Departments Style Guides.


    How to create a basic table:

    • From the WYSIWYG in any content item, place the cursor where you want to create the table.
    • Click on the "Table" dropdown in the WYSIWYG toolbar to bring up the "Insert table" pop-up.
    • Hover over the number of rows and columns that you want for the new table and click on the bottom-right cell to create the table.
    • A table will appear in the WYSIWYG. Drag any of the corners to adjust the height and width of the table.
    • You will be taken back to the WYSIWYG where you can now enter content into the cells of the table.
    • Note: You can edit the table's main settings at any time by highlighting the table or clicking inside the table and then clicking the "Table" dropdown from the WYSIWYG toolbar and then selecting the "Table Properties" option.

    How to add a row or column:

    • From the WYSIWYG in any content item, select a cell in a column or row adjacent to where you want to insert a new column or row.
    • Right click on the cell and hover over the "Row" or "Column" option and select "Insert Row Before" or "Insert Row After"; or "Insert Column Before" or "Insert Column After."
    • Alternatively, you can click on the appropriate cell and then click the "Table" dropdown from the WYSIWYG toolbar, hover over either "Row" or "Column" and select "Insert Row Before" or "Insert Row After"; or "Insert Column Before" or "Insert Column After."

    How to delete a row or column:

    • From the WYSIWYG in any content item, select a cell in a column or row that you want to delete.
    • Right click on the cell and hover over the "Row" or "Column" option and select "Delete row"; or "Delete column."
    • Alternatively, you can click on the appropriate cell and then click the "Table" dropdown from the WYSIWYG toolbar, hover over either "Row" or "Column" and select "Delete row"; or "Delete column."

    How to adjust cell padding and cell spacing in a table:

    • From the WYSIWYG in any content item, highlight the table or click inside the table that you wish to modify.
    • Click on the "Table" dropdown in the WYSIWYG toolbar to select the "Table Properties" dialogue box.
    • Fill in the text field for cellpadding (room between the text and the edge of the table cell) and cellspacing (space between cells). Enter a number in the text field in pixels, but do not include the letters px after the number.
    • Once you are finished, click "Ok".
    • You will be taken back to the WYSIWYG where you can now enter content into the cells of the table.

    How to wrap text around a table:

    • From the WYSIWYG in any content item, highlight the table or click inside the table that you wish to modify.
    • Click on the "Table" dropdown in the WYSIWYG toolbar to select the "Table Properties" dialogue box.
    • Choose either right, left or center from the "Alignment" drop down.
    • Once you are finished, click "Ok".
    • You will be taken back to the WYSIWYG where you can now enter content into the cells of the table.

    How to set the width and height of a table:

    • From the WYSIWYG in any content item, highlight the table or click inside the table that you wish to modify.
    • Click on the "Table" dropdown in the WYSIWYG toolbar to select the "Table Properties" dialogue box.
    • Choose a width and a height either in percent (include the % symbol after the number) or in pixels (include the letters px after the number). Entering "100%" for the width will allow the table to adjust to the web browser screen width.
    • Once you are finished, click "Ok".
    • You will be taken back to the WYSIWYG where you can now enter content into the cells of the table.

    How to create a heading row or heading column:

    • From the WYSIWYG in any content item, select a cell in the row or column you wish to modify.
    • Right click on the cell, hover over "Row" or "Column" and select "Row Properties" or "Column Properties" to bring up the Row or Column Properties dialogue box. 
    • In the "Row type"/"Column Type" dropdown, choose "Header".
    • Once you are finished, click "Ok".
    • You will be taken back to the WYSIWYG where you can now enter content into the cells of the table.

    How to align the text of a row, column, or cell(s):

    • From the WYSIWYG in any content item, select a cell in the row or column you wish to modify.
    • Right click on the cell, hover over "Row", "Column," or "Cell" and select "Row Properties"; "Column Properties"; or "Cell Properties" to bring up the Row; Column; or Cell Properties dialogue box.
    • To align the text within the cells, choose either right, left or center from the "Alignment" drop down.
    • Once you are finished, click "Ok".
    • You will be taken back to the WYSIWYG.

    How to set the height of a row or column:

    • From the WYSIWYG in any content item, select a cell in the row you wish to modify.
    • Right click on the cell, hover over "Row" or "Column" and select "Row Properties" or "Column Properties" to bring up either the Row of Column Properties dialogue box.
    • Enter a number in the height field in percent (include the % symbol after the number) or in pixels (just numbers).
    • When you are finished formatting the row(s), click "Ok".
    • You will be taken back to the WYSIWYG.

    How to set border color in a row, column, or cell(s):

    • From the WYSIWYG in any content item, highlight all the cells you wish to modify.
    • Rick click on the highlighted cells, hover over "Cell" and select "Cell properties" to bring up the Cell Properties dialogue box.
    • Enter a color in the border color field. You will need to use standard HTML color names or codes such as "red" or "#FF0000." 
    • When you are finished formatting the cells, click "Ok".