If you are a web content manager but aren’t comfortable with styling tables in HTML and CSS, then you need to use your CMS’s WYSIWYG editor to enter your data tables.
Each CMS is a little different. In today’s post, I’ll share a screenshot tutorial I made while I was using Drupal.
Table Properties Panel
Tables themselves have property panels, but table cells also have their own property panels. Once you know how to find the property panels, you can usually style a decent table. To style a row, select multiple cells by dragging over all the data in the cells. Then right click and find cell > cell properties. That’s how you can do the popular ‘zebra stripe’ look of alternating light and dark background colored rows.
Using Drupal’s WYSIWYG editor to add a data table
What you need to know
There are some basic accessibility principles you should know when you’re putting tabular data on a web page. Tables should have the header rows declared. You could have a top header row, side header row, or both. This not only makes the font of the data in the table bold, it gives assistive technology some idea about the hierarchy of the stuff in the table.
Captions
Tables should have captions. For an image, a caption is small text underneath it, but for a table the caption is the title of the table. Even if your CMS is not set up to populate the table caption on the webpage doesn’t make the caption optional. Assistive technology reads the caption to vision impaired users. Enter a declarative sentence that explains what this table is about, just like you would for a chart or graph title.
Hexadecimal colors
While you do have access to a color picker, it’s better to use the hex value that provides the best color contrast between the text and background. Users of screen magnifier assistive technology really appreciate high contrast, and there is the WCAG 2.0 to consider. You can check your color contrast on any web page using the Wave Toolbar. It should pass at the AA level.
Flexible units
If the website you are working on is responsive, then it’s a best practice to use flexible units on your table widths and cell widths. The percent is a good choice, and there is also a percent item in the width dropdown.