Tables

Style Tables with Borders and a Header Row:

Tables that are used to display data, can use styles with a border and a blue background on the table header row. Please read WebAIM Guidelines for Creating Accessible Data Tables, to make sure any tables created within the CTY site are Section 508 compliant.

• Apply a class to the table
• Designate a header row
• Assign column widths (for CTYOnline courses)
• See an example of a styled table

Apply a Class to the Table:

1. Within a page, use the Insert/Edit Table option to insert a table.
2. In the Insert Table properties menu, in the Class menu select data_table.
3. Use a width of 100% unless a specific width is preferred.
4. The style will automatically add spacing and padding and a dark blue border to the table.
5. Save.

Designate the First Row as the Table Header:

1. It is a requirement, in order to meet Section 508 guidelines, that a Table Header is identified.
2. Right-click within the first table cell and choose Row > Row Properties.
3. In the Select Cells menu, choose the number of cells in the entire top row (Current cell + 3 Cells in a 4 column table).
4. Under the Type menu choose Header.
   
5. The TH style (defined in the main stylesheet) will automatically make the type bigger and bolder and add a blue background to the top row.
6. Save.

Assign Column Widths (for CTYOnline Tables)

CTYOnline tables containing course data benefit from setting widths on some of the columns so that the tables are consistent and the Course Titles have plenty of room for display.

1. Make sure your entire table's width is set to 100%.
2. Right-click in the first cell of the column that needs a width specified.
3. Select Cell and Cell Properties.
4. Next to Width, enter a specific width.
5. For CTYOnline use the following guidelines (do NOT set a width on Course Titles):
   • Subjects: Width=145
   • Course Formats: Width=115
   • Grade Levels: Width=85
   • Qualified Scores: Width=75

An Example of a Styled Table