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
|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.