Page Settings

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

    Tables

    Tables are a valuable means of organizing and calling out content on your pages.  Based on the style of this site and best practices for using tables on the Web, here are some recommendations for how to approach using tables on your own pages.


    Colors:

    One way to make table information more friendly is to organize it with background colors in the cells:

    • You can easily set every other row in your table to have a white background.  This should be used anywhere where it helps with the readabliity of your content.
    • Heading rows not only have a background color of white, but also a different bottom border to call them out.  You should always use a heading row if applicable.
    • While the background colors of table cells cannot be changed, the border colors can.  However, this feature should be used very sparingly.

    Sizes:

    You'll notice that you can set the width and height of your tables and the rows, cells, and columns they contain:

    • Please don't set your tables to be wider than the Colorado College page design allows.
    • You don't have to set the width of every cell in your table; just set the width of the cells in the first row and the other cells in each column will follow suit.

    Creating 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.

    Adding 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."

    Deleting 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."

    Adjusting 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.

    Wrapping 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.

    Setting 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.

    Creating 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.

    Aligning 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.

    Setting 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.

    Setting 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".