Technical Training

Working with tables

The use and functionality of tables in web pages has a long (and sometimes dubious and quite often contentious) history. It seems the current nature of web development is that best practices are always being debated. If you want a good fight, find a web development blog and state your qualified opinion. You'll get support from some quarters but others will call you out and tell you in no-uncertain-terms why you are wrong. For example:

Should you ever use tables for layout?
NO! MAYBE?
A Complete Guide to the Table Element Readers Respond: Great Reasons to Use CSS for Layout Instead of Tables

The debate may rage on for quite a while - especially now that mobile devices are ubiquitous. That being said, what should CSU CMS users do with tables? Short answer: display tabular data.

What you will do

  • Use the table tool to create a table
  • Use a contextual menu to edit the table

Step By Step Procedure

  1. Log in to CMS and navigate to the page in which the table will be placed.
  2. Click on the Edit tab of the page
    Click on the Edit tab
  3. Inside the editing window, click on the location where the table will be inserted and press the enter (Win) return (Mac) key to create a new paragraph
    • Please note: tables seem to have their own peculiar spacing so it's best to insert a hard return and create a new paragraph as opposed to a line break.
  4. Click on the Table tool in the toolbar
    Click the Table tool button in the Toolbar
  5. In the Table Properties dialog box, enter the appropriate information about the layout of your new table.
    Edit the properties of a table
  6. Click on OK

Changing the default settings in the Table Properties

Like most modern computer applications, the CMS gives you the ability to edit page elements (like pictures, lists, etc.) by using a contextual menu that you activate by right-clicking on the element.

  1. Right-click on the table.
  2. Select Table Properties from the pop-up contextual menu.
    Right-click to access additional table editing options
  3. You are only able to edit a few of the properties. Styling (including width and height) the table is pres-set and cannot be changed.
    1. Number of Rows and Columns
    2. Display of headers at the top of the table, along the left side, or both. The geen row in the sample above is the header.
    3. Border size
    4. Alignment
    5. Cell spacing and Cell padding
    6. Add a caption to be displayed above the table
      • Please note: It is no longer suggested to use the Summary attribute and has been removed from the HTML5 specification.
    7. Other options are not supported and will not work.

Change or Delete the table

  1. Right-click the table to access the contextual menu
  2. Select Delete Table to remove the table - OR -
  3. Change the number of rows or columns by selecting the appropriate menu item
    Change or delete the table using the contextual menu