Adding a data table

Accessible tables

Like the rest of your content, tables should also meet accessibility standards as closely as possible.

In the main content area while in the "Edit" tab, place your cursor where you want the table to appear and follow these steps.

  1. Click Insert new table.
  2. The Insert/Modify Table dialogue box will appear. Specify the number of columns (Cols) and rows, then enter a default width. The width can be removed or changed once you've entered information into your table. The width can also be entered as a whole number or as a percentage.
    Insert or modify table dialogue box
  3. Click Insert to add the table.
    Note: If the table does not display properly at first, submit the file and then reopen it.
  4. A dashed outline of your table will appear with your cursor blinking inside the top-left cell. You can begin typing text immediately, or using the right-click option to modify cell, row, column, or entire table properties.

Modify a Table

To modify a table, right-click on it (Enable right click on a Mac mouse). A drop-down menu appears, allowing you to insert and delete columns and rows, etc.

table right click

Customizing tables

For more advanced users who are comfortable working with HTML and CSS, you do have the option of applying custom styles to your tables.

  1. Following the steps above, create a basic table.
  2. While still in the Insert/Modify a Table dialogue box, click the Advanced tab.
  3. The first field, titled Id, allows you to enter the Id name with which you will associate your CSS. Remember, all unique CSS needs to begin with "u_". Example: "u_table_blue". We recommend including your unique style in a file named supplemental.css and save it in /local_resources/css/.

    Enter an ID name to attach custom styles to your tables. 
  4. Click Insert to continue, then click Submit to save your changes.

Table Starter Kit

Tables in Cascade aren't the easiest to configure and use. If you have an HTML editor or even a plain text application like NotePad, you can copy the starter code shown below, develop your table off-line and then paste it back into your desired page. The table structure shown below is an excellent starting point to meet accessibility guidelines, but you are strongly encouraged to review the full accessibility guidelines for making tables usable by all visitors to your website in order to meet required campus policy.

<table summary="A description of your table here">
<caption>Visible table information</caption>
 <thead>
  <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
 </thead>
 <tfoot>
   <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </tfoot>
  <tbody>
   <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </tbody>
</table>