A data table is a table for organizing and presenting data.
Sometimes web content authors use tables for layout — to position objects and text in space. While layout tables aren’t inherently inaccessible, you should avoid using them this way on Mass.gov.
To make a table, find the table tool in a rich text editor. You can find rich text editors in most content types on Mass.gov. For example, Service Details, How-tos, Location pages, and Guides all have rich text editors. Here’s where to find the table tool:
Clicking the table tool will open up the “Table Properties” menu. This is where you’ll structure your table. You can tell the CMS how many rows and columns you want, and if you want headers or captions. (Don’t worry if you mess up — you can edit all of these later.)
Headers: You can choose to use headers for your table’s columns, rows, or both. Headers are important for 2 reasons. First, they help users distinguish between labels for data and data itself.
Second, headers are important for screen readers, tools that help those who have trouble seeing or reading interact with your content. Screen readers can cycle through table headers and columns to help users navigate tables — but only if those headers are formatted as headers (and not, for example, using bold or italics).
Here’s how row and column headers appear on Mass.gov:
Note that the CMS automatically prevents headers from spanning multiple columns or rows, since spanned headers aren’t always supported by screen readers. It’s often a good idea to “flatten” headers (i.e. just have one) anyway, since multiple header layers can be confusing for anyone to read.
For example, here’s a table with 2 layers of headers…
…that could be improved by merging the rows:
Captions: Think of a caption like a table’s title. You can use a caption to explain or provide context for the data in your table. As with headers, screen readers can associate captions with the tables they describe.
By default, table captions are plain text and center-aligned. However, you can format them as bold, italic, or even as a heading. At this time, you can’t realign captions: they must be centered.
Compared to other things you can do with the rich text editor, tables are complicated. As a result, getting the most out of them requires a little more effort than other aspects of the CMS. It’s even helpful to know how to change the HTML, which you can examine by using the “source” tool in the rich text editor. Here’s a resource that will help acquaint you with table-related HTML.
When you first create your table, you’ll see something that looks like this:
It looks this way because it has no data in it. It will automatically resize itself as you begin to enter data.
It can also be hard to place your cursor in a data-less table’s cell, since they’re so thin. However, if you place your cursor at the end of the caption or above the table, you can move your cursor into the top left cell by using the right arrow or the down arrow. If you place your cursor beneath the table, you can move into the bottom right cell by using the left arrow or the up arrow.
Once your cursor is in the table, you can move left to right using:
You can also move right to left using:
To add a line break before or after your table, hover your cursor near the first or last row. A horizontal, red, dotted line will appear across the editor. Find and click the arrow on the line’s right to insert a line break.
If you need to add columns or rows to your table, move your cursor to a column or row that is next to where you want your new column or row. Right click to open the table menu. Then, open the “column” or “row” submenu, and select “insert…before” or “insert…after” (depending where you want your new column or row to go).
To delete a column or row, right click on the column or row you want to remove. Then, open the “column” or “row” submenu and select “delete.”
It’s also possible to add a single cell by right clicking in a row, opening the “cell” submenu and selecting “insert cell before” or “insert cell after.” Currently, both options only add a cell to the end of the row.
Note: You will not be able to change the number of rows or columns from the “table properties” menu after you’ve created the table. Use the method above instead.
You can add a caption to an existing table by right clicking anywhere on the table and selecting “Table Properties.” This will bring up the menu you saw when you first clicked the table option, and you can type in a caption.
Removing a caption is a little harder. You can highlight and erase the caption text, but you may find that the caption formatting is stubborn: Your cursor will remain center-aligned over the table, and you won’t be able to “backspace” to the beginning of the line.
You can easily remove the caption by removing its HTML tags. Click on the “source” button at the far right of the rich text editor:
Next, find the table with the offending caption. You can identify a table in HTML by looking for the <table> tag. Beneath the table tag, you’ll see more HTML tags and the content that you’ve entered in the table.
Once you’ve found the right table, look for tags that indicate the beginning and end of the caption: <caption> </caption>. Highlight and delete them.
Then, click “source” again to return to the normal content editing view.
Here’s a video that provides an example of how to effectively use headers and captions:
You can learn more about online accessibility and how people with disabilities experience the internet from W3C, the authoritative source for accessibility best practices. Here’s a selection of informative resources:
Need advice on accessibility? Reach out to EOTSS accessibility expert Sarah Bourne at Sarah.Bourne@mass.gov.