Tables
You have options in the CMS: making a data table in a rich text field or uploading a CSV table.
Making data tables
Data tables for organizing and presenting data.
They can be created from within rich text editors on various content types, or via CSV files on Information Details pages.
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.
As a general guideline, avoid copying and pasting tables from other places. This often generates tables that behave in unexpected and undesired ways. Instead, re-create tables using the table tool, as described below.
Add a table (with text editor)
To make a table in a rich text editor, find the table tool in the icon bar. You can find rich text editors in most content types on Mass.gov. For example, How-tos, Location pages, and Guides all have them. 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 and captions: Key tools for clarity and accessibility
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.
Entering data into and editing data tables
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:
Right arrow
Down arrow
Tab
You can also move right to left using:
Left arrow
Up arrow
Shift+tab
What if there’s nowhere to put my cursor above or below the table (i.e. how do I add a line break?)
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.
Adding and deleting rows and columns
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.
Adding and deleting captions to existing table
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:
Uploading CSV tables
If you need to publish a group of content items (documents, URLs, job postings, etc.) and have already reviewed the content listing options in the CMS, you may decide that a CSV table is the best choice. A CSV table offers a clean way to organize and display information in a searchable, paginated format.
Keep in mind that CSV tables are supported on Information Details pages only.
Follow the guidelines here for uploading a CSV table in the CMS.
Clean the data
The data should be clean and organized, as the table will display on Mass.gov as it is on the spreadsheet.
Use short, descriptive column headers but avoid abbreviations.
Make sure that all the data follows the same capitalization and spelling conventions. Use uniform case. Avoid ALL CAPS, as they are harder to scan. Use this Microsoft support article for a helpful formula to change text case in MS Excel.
Highlight any empty rows or columns and select “delete.” In case there are any hidden characters, doing this will clean them out.
Make sure to save the spreadsheet as a .csv as the CMS will only accept this file type.
Upload the CSV file to the CMS
On the backend of your Information Details page, under the “Content” tab, click on “Add Information Details Section.”
Provide a clear, specific heading for the table.
You may choose to add a rich text field to provide context for the table or instructions about how to use it.
Select “Add csv table” from the content section options.
Select choose file and upload the spreadsheet you want to use for your table.
Set up the table display for users
Open the “Display Configuration” accordion and choose how you will display the table. We recommend displaying 5-10 rows and to enable searching.
Keep in mind that CSV tables are designed to be responsive. How the table displays will change based on the width of the visitor’s browser (desktop, tablet, mobile) and also based on the number of columns in the table.
You have two options for responsiveness. You can let visitors to the page expand the table on their own, or you can automatically show fields that don’t fit stacked vertically below the row.
If you want visitors to have the option of downloading the CSV table, tick the box to display a download link. You will also need to fill in the download link text.
If the table includes URLS, you might want to “automatically convert URLs to links” so that users can click on them in the downloaded spreadsheet.
More information on accessibility
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:
Was this article helpful?
Last updated
