Tables

Is a table the right solution?

Tables should only be used to display data that needs to be aligned in rows and columns to be meaningful and easier to understand. With the rapid growth of mobile web access, we need to consider the user experience across device sizes. If you create a table, be sure to first view the page on a phone or reduce the width of your browser window to simulate a mobile view. At this point evaluate if a table is the best solution for the content.

Note: You must ensure your table is accessible by including table headers and a table caption. Always apply the tablespecial style to your tables to enhance the visual display, including a horizontal scrolling feature on smaller devices.

Tip: If you would like a more consolidated view of your content when your visitors first land on your page, you may want to create a collapsible list. That feature is created using a table, but applies a custom presentation style.

Insert/Edit a Table

Place your cursor where you'd like to insert a table, open the Table menu () and select Table. Highlight the desired configuration of rows and columns and click the grid to insert the table. You can also right-click anywhere in your content to insert a table.

Place your cursor in an existing table and open the Table menu () to access the table properties dialog or delete the table.

Tip: Do not resize your table by clicking and dragging the corner element. As you enter content in the cells the table will size itself automatically, ensuring an optimized layout across device and browser sizes.

Table Editing Quick Actions (Left Click)

Left-click in any table cell to open the available quick actions:

Table quick actions

Table properties
Delete table
Insert row before
Insert row after
Delete row
Insert column before
Insert column after
Delete Column

Table Editing Sub-Menus (Right Click)

Right-click in any table cell to bring up additional table editing options. From here you can insert, delete or merge individual cells, rows and columns, or delete the table.

Table Properties and Styling

Most settings in the Table properties dialog should not be used. Instead, apply the tablespecial format. This will style your table to complement the website's design:

Select the table by placing your cursor within the table and clicking "table" in the path display at the bottom of the editor.
Open the Formats sub-menu, and select Custom > tablespecial. See an example table.

Table Headers

The cells in a table's first row, first column or both should define or label the data included in that specific column or row. To identify a cell as a header cell, you will need to modify the cell's properties. Once modified, these cells are highlighted to make the table easier to visually read. In addition, for those using a screen reader, the header is then announced before the data in each cell of that row or column is read.

To set a cell as a header cell:

Right-click on the cell and select Cell > Cell properties
Toggle the Cell type field from Data to Header cell.
Set the Scope field to Row, Column, Row group or Column group — this defines for screen readers which cells in the table the header applies to.

Table Caption

Open the Table properties dialog box and use the Caption checkbox to turn on the accessibility caption field at the top of your table. In the field that appears at the top of your table, fill in a descriptive caption for screen readers. Your caption should include explanations for any content or formatting anomalies that you believe will cause a challenge for those using screen readers. Note: The table caption is only presented to screen readers and will not be visually displayed on the submitted or published page.

Example table captions:

A two-column table presenting a break down of William & Mary's tuition and fees.
A three-column table with header cells in the first row.
A single column table of collapsible content for formatting purposes.

If you miss this step, the automatic Content Checker will report the issue and let you provide the caption when you submit the page.

Table Style Examples

Default Table Style

This is how your table will appear until you apply the tablespecial style. Do not leave a table with this default style.

Sample two column table
Table Cell Contents	Table Cell Contents
Table Cell Contents	Table Cell Contents

Table with the tablespecial Format Applied

Insert your table and then apply the tablespecial style. Next, be sure to add header cells to define the columns or rows of data to ensure the table is accessible.

Sample two column table with styling applied to add shading and padding to the cells.
Table Cell Contents	Table Cell Contents
Table Cell Contents	Table Cell Contents

Table with Header Cells to Define the Columns

In this example, the cells at the top of each column have been set as header cells with the Scope field set to Column.

Sample two column table with header cells for each column.
Sample Table Header	Sample Table Header
Table Cell Contents	Table Cell Contents
Table Cell Contents	Table Cell Contents
Table Cell Contents	Table Cell Contents

Table with Merged Header Cell to Define a Group of Columns

In this example, multiple cells at the top of the table have been merged into a single cell to define multiple columns of data. To create a single cell that spans multiple columns or rows, highlight the cells you wish to merge, right-click them and select Cells > Merge. Next, set the merged cells as a header cell with the Scope field set to Column group.

Sample two column table with a header cell for a column group.
Sample Merged Header Cell
Table Cell Contents	Table Cell Contents
Table Cell Contents	Table Cell Contents
Table Cell Contents	Table Cell Contents