Tables

There are a few styles that can be used for tables. These styles make it much easier to create a clean, consistant looking table for your pages.

Majors Students Enrollment
Biochemestry 101 80%
Education 552 95%
Linguistics 256 99%

*This table is for design purposes only and does not reflect any actual numbers pertaining to CSUSM enrollment

How this table was created

  1. Right click in the editor where you want the table to appear and choose "Inserts a new table"
  2. The following settings were used when creating the table:
    • Width: 100% (Always use a % for the width. If you use an actual pixel width, the table could break out of the content area and create issues)
    • Cellpadding: 3
    • Cellspacing: 3 (Padding and spacing will move the content away from the table borders and make the text easier to read)
    • Border: 0 (The table style will handle the border)
    • The table also has a header for the first row.
    • Each column was set to 33%. This ensures even columsns within this table. Just like the table width, column widths should always be set with a %
  3. Click the table (Make sure 'table' is the only thing that shows for your Path in the WYSIWYG)
  4. Click 'Styles' and choose 'Table-Alt-H'
  5. Submit the page

You can also choose Table-Alt-V if you want the light to dark backgrounds to be vertical. Typically since tables will be read left to right, Table-Alt_H should be used.

Creating complex tables

It is reccomended to use an external editor such as Dreamweaver if the table is going to complex. It is much easier to edit, style, and format the table in DreamWeaver than it is within Cascade's WYSIWYG editor.

You can edit and create tables much easier in DreamWeaver. Of course this means playing a bit with HTML. It's not that difficult. Here's how!

  1. Create a new HTML file in DreamWeaver
  2. Click 'Split' for your display. (Top left)
  3. In the Code window, enter the following text between the <title> and </head> lines:
    <link href="http://www.csusm.edu/general/content.css" rel="stylesheet" type="text/css" />
  4. Save the page on your computer. (This will give the page access to the campus stylesheet)
  5. Create a table as normal
  6. To choose styles:
    1. Select the cells you wish to change
    2. Choose the appropriate style from the style drop down in the 'Properties' pane (bottom of the screen)
  7. In the code view, copy all the code between the two <body> tags.
  8. In Cascade, edit your page and click the HTML button.
  9. Paste the code and click 'Update'