June 6, 2016 | Jason O'Connell | firstname.lastname@example.org
Tables can be a great way to organize data on your page in an easy to read, aesthetically pleasing form. However, due to their very nature of defining the layout of data or information, tables are not always the best choice for sites with responsive design. Here we have compiled some "Do's" and "Don'ts" regarding tables in the CMS.
- Use the table icon in the TinyMCE editor to create your table.
- Make the first row or column a header (checkbox in the table creator), depending on how your information is laid out.
- Use the preview function in the CMS to test how your tables look. Be sure to resize your browser to be very narrow to see what the table will look like on mobile devices.
- Link to PDFs or spreadsheets when the information or data set is too large for a responsive table.
- Email email@example.com if you are having issues with a table.
- Keep your cell text as short as possible. Use abbreviations where appropriate and avoid long character strings as they do not wrap to the next line and take up more of your available width. For example, using 'Dec.' instead of 'December' will help you keep your table responsive.
- Similarly, add a space after using slashes to help your content wrap to the next line on smaller devices. 'Test/content' will stay on one line no matter what, however 'test/ content' can split between two lines when the screen size gets small enough.
- Don't make your table more than three columns wide. Vertically oriented cell phone screens are very narrow, and since we use responsive design with no horizontal scrolling, any tables with more than three columns will get cut off and your mobile visitors will be missing out on your content.
- Don't define cell, column or row heights and widths. This will break responsiveness.
- Don't copy tables from an outside source. Directly copying tables from elsewhere brings in outside styling that conflicts with our website styles, potentially causing accessibility, responsiveness, or format issues.
- Don't embed images within a table.
- Don't use a table to style information that may be better off as a list or in the 'Column Boxes' content type.
|This is a Properly Constructed Table|
|Row 1||Info Here||More Info|
|Row 2||Info Here||More Info|
|This is NOT a Properly Constructed Table|
|Shrink your browser down to 'mobile' size and see.||The last few cells will get cut off from view.||More info||Test column||Phones can't see this.|
|Responsiveness/Accessibility||The cell to the left will have difficulty wrapping text.||More info.||Test column||Phones can't see this.|