Tabled Information

In order to have body content that is "mobile friendly," limit tables to two columns when possible.

Plus all table widths should be set to 100% and NOT any fixed pixel number. 

This automatically makes a table mobile-friendly since it will fit most displays no matter the size.

Here's an example of the two-column approach:

Spring Semester 2013 - Regular Classes

January 14 - May 17

Date Event
Dec 20 Tuition payment deadline.
After Dec 20, payment is due within 24 hours of registration 
Jan 14 Classes begin 
Jan 18 Last day to add a class 
Jan 18 Last day to drop a class 
 Jan 21 Dr. Martin Luther King Jr. Holiday, No Classes 
Jan 22 Financial Aid Disbursement 
Feb 12 Success Day 
Feb 18 President's Day Holiday, No Classes 


We like to have the table header (the top line) gray background with white lettering. We do this by labeling the cells with id="tHeader"

Plus, for usability reasons, "zebra-striping" the rows makes it easier for users to parse the tabled information.

The bad news is that creating a table like this inside the CMS's editor is very difficult. Ask us to show you how to add that in the editor.

In the meantime, please contact the web architect if you need any help styling your tables.