Santa Clara University

Using Tables

The Commonspot editor allows you to add tables to a page - useful when presenting content that's best organized in a series of columns and/or rows.

By default, a table added via the editor will be displayed like this:

Table Borders

The default table style sets a border value of "1" - that results in a 1-pixel border around each table cell.  You can remove that border through the table properties form.

Table Styles

A style class named "grid" is available for tables - you'll see that in the editor's table form.

A table with the "grid" class assigned and the border value set to "0" has this formatting applied.

Table Headers

Tables can include cells that are formatted to present row headers.  To add a row with headers, first add a table to the page, then - with the cursor in a table cell in the top row - right click and select "insert row". You'll be presented with an option to set the new row's cells as headers.

This example includes a header row, with the table's border set to "0", and the "grid" style class applied.

"Zebra" Style Tables

With a minor edit to the HTML source code for a table and the addition of a custom script, you can present a table with alternating bands of background color for each row.  To apply this formatting, add a table as described above, then switch to the editor's HTML view.  Look for the opening table tag, and add the "id" attribute with the value "zebra".  You should also set the border value to zero, if it isn't set to that already.

Following that, add the "Zebra Table" element (found in the Miscellaneous category in the Element Gallery) below the editor element.  This results in a table that uses alternating bands of color to help differentiate each row.

How to add more than one Zebra table to a page

You can have more than one table on a page with this formatting, but you'll need to do two things in order for this to work properly: use a unique ID for each table, and include Zebra Table elements for each table. The additional Zebra Table elements will need to have their default IDs set to the ID values you've entered for the added tables. You can set that by entering a custom script parameter for the extra Zebra Table elements. Here are the steps to follow - this example assumes that you're entering a second table with Zebra style to a page with a pre-existing Zebra table:

1. Add a table to the page, and switch to the HTML view in Author mode
2. Set the id for the table; id="zebra2"
3. Submit that change, then add another Zebra Table element below the text editor element
4. Edit the Zebra Table element; select the Script Parameters tab and enter "tableid=zebra2"

You can continue these steps for additional Zebra tables - just be sure to use unique ids for each pair of HTML tables and Zebra Table custom elements.