Overview

---

Learn how to use tables in the campus CMS.

 

Steps to Take

---

Add a table to your page

You can insert a table in any WYSIWYG field.

1. Choose Table > Table
2. Mouse over the grid to select the size of your table
3. Click to insert your table (more rows and columns can be added later)
   
   

Edit your table

When you select a table in the WYSIWYG, a number of buttons appear:

From left to right these are:

• Table properties, Delete table
• Insert row before, Insert row after, Delete row
• Insert column before, Insert column after, Delete column

Apply styles to a table

When you first insert a table, it will not have a style applied to it.

Apply the campuswide style:

1. Click < > to open the HTML editor.
2. Uncheck Advanced editor (this will remove autocomplete)
3. Replace the <table> with <table class="styled">
4. Click Ok

Make the first row a title row

1. Click < > to open the HTML editor.
2. Uncheck Advanced editor (this will remove autocomplete)
3. For the first row's cells, replace <td> ... </td> with <th> ... </th>
4. Click Ok

<table class="styled">
    <tbody>
        <tr>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
        </tr>
        <tr class="odd">
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
        <tr class="even">
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </tbody>
</table>

If you want to use alternate row shading, this still needs to be done via HTML. Just add class="odd" and class="even" to alternating rows. See the CMS kitchen sink page for more information.