[Skip to Content]

Working with Tables

Typically we try not to use tables on the web pages we create for the Upstate Website.  Tables use quite a lot of code to display, which can slow down loading of pages, they are also not as "responsive" as other ways of organizing data can be.  But sometimes tables are the best, or easiest way to keep data organized and easy to read on a web page.  So we do allow tables on our pages, and here are a few tips when working with them in the Cascade CMS.

Expand all

Creating a blank table

First, click the Insert/Edit table button table. In this example, the table has five rows and three columns. Then added our information.

Example, unstyled:

Letters People Places
A Albert Einstein Alabama
B Beethoven Botswana
C Charles Schultz California
D Don Knots Denmark

Table style: striped rows

The Upstate striped rows style adds the appropriate spacing (1px) and padding (3px) between the table's cells and alternates a gray background rows . This will become more noticeable as we add more styles below.

  • Click anywhere on your table table
  • Click the Formats dropdown. icon: text formats
  • Under "Custom", select "table striped rows"

Result:

Letters People Places
A Albert Einstein Alabama
B Beethoven Botswana
C Charles Schultz California
D Don Knots Denmark

Header: styled blue

Our tables also use a specific style for the header, adding white-bolded text, centered on a blue background.

  • Highlight all the cells in the top row
  • Click the Formats dropdown. icon: text formats
  • Under the "Custom" dropdown, select "Table styled blue header"
Result:
Letters People Places
A Albert Einstein Alabama
B Beethoven Botswana
C Charles Schultz California
D Don Knots Denmark

If you made a mistake, use Format-> "Clear Formatting"icon: clean codeto reset the style: 

Adding rows and columns

Here's how to add rows and columns to your existing table.

  • Click above/below or left/right of where you want your row/column added
  • A menu selection should appear.
  • For Rows: Click Row-> Insert Row Before (or Insert Row After)
  • For Columns: Click Column -> Insert Column Before (or Insert Column After)

Letters People Places Things
A Albert Einstein Alabama Alligators
B Beethoven Botswana Batteries
C Charles Schultz California Classrooms
D Don Knots Denmark Desks
E Ella Fitzgerald Europe Ears

Merging cells

You may want to merge cells, just be careful with formatting styles.

  • Highlight the cells you'd like to merge
  • Right-click highlighted area, or click the "Table" dropdown
  • Select from the dropdown: Cell -> Merge Cells

An example table.
Letters Examples
A Albert Einstein Alabama Alligators
B Beethoven Botswana Batteries
C Charles Schultz California Classrooms
D Don Knots Denmark Desks
E Ella Fitzgerald Europe Ears

Changing the column width

Currently, if you want to adjust a column's width to be longer or shorter, talk to us, as this requires changing the html code. Contact websupport if you want more specific changes.
Top