• Departments & Offices
• University Communications
• University Web & Design
• Web & Apps
• Cascade
• Help
• Building & Editing
• WYSIWYG Editor
• Tables

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. 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.

Tip: We recommend always applying the tablespecial style to your tables to enhance the visual display, including a horizontal scrolling feature on smaller devices.

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 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 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.

 

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