Tables

Is a table the right solution?

Tables should be used to display data that needs to be aligned in rows and columns to be meaningful. With the rapid growth of mobile web access, we need to consider the user experience on all size devices. If you create a table, be sure to 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.

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 instead of a table.

Table menu
Insert/edit a table

Place your cursor where you'd like to insert a table, open the Table menu (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 (Table menu) to access the table properties dialog or delete the table.

Table properties dialog box
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: 

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

Open the Table properties dialog box and use the Caption checkbox to turn on an accessibility caption field at the top of your table in the WYSIWYG editor. In the field that appears at the top of your table, fill in a descriptive caption for screen readers. Your caption can 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 displayed on the submitted or published page.

An example table caption: A two-column table presenting a break down of William & Mary's tuition and fees.

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 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 right-click menu

 

Available table styles
Default table style sample

An unstyled table option.

Sample two column table
Table Cell

Additional content.

Table Cell

Additional content.

Table Cell

Additional content.

Table Cell

Additional content.

Table with tablespecial format applied (preferred)

To get this style, select the table by placing your cursor within the table and clicking "table" in the path display at the bottom of the editor. Then, open the Formats sub-menu, and select Custom > tablespecial. 

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

Additional content.

Table Cell

Additional content.

Table Cell

Additional content.

Table Cell

Additional content.

Table with tablespecial format and header rows (preferred)

To achieve a row that spans the full width, merge all cells of a row — highlight the cells, right click within and select Cells > Merge. To achieve the darker "header" row, right-click on the merged cells then select Cell > Cell Properties. On the Cell Properties dialog box you change the Cell Type to Header Cell, and the Scope to either Column Group (if each header cells is above a groups columns) or Column (if each header cell is above individual columns).

Sample two column table with a header cell for a column group.
Sample Table Heading
Table Cell Contents Table Cell Contents
Table Cell Contents Table Cell Contents
Table Cell Contents Table Cell Contents
Sample Table Heading
Table Cell Contents Table Cell Contents
Table Cell Contents Table Cell Contents
Table Cell Contents Table Cell Contents
Sample two column table with header cells for each column.
Sample Table Heading Sample Table Heading
Table Cell Contents Table Cell Contents
Table Cell Contents Table Cell Contents
Table Cell Contents Table Cell Contents