Add Tables

Using tables correctly is an accessibility best practice (and the UC has an accessibility policy(link is external) that states that your websites and website content need to be accessible). See "Use tables for tabular data, not for layout(link is external)," one of the "Top 10 Tips for Making Your Website Accessible(link is external)."

Make Sure Your Table is Accessible

A blind or low-vision person may visit your website using a "screen reader(link is external)." To ensure that a screen reader can properly associate the data between the rows and columns, you should make sure to add table headers with the appropriate scope.

If you are new to creating accessible tables, make sure to see the "Table Headers" and "Header Scope" sections further down on this page.

To add a table, select the "Insert/Edit Table" button from the bottom of the editing toolbar:

A window will pop up, which will allow you to specify the desired number of rows and columns for your table.

Important Note About Table Editing Options

At this time, the other editing options available in this window (cell padding, cell spacing, width, colors, etc.) will NOT work; use only the options for Columns, Rows, and Table Caption (optional):

After adding your table, you can add and delete columns and rows, as well as merge and split cells, using the editing toolbar:

What is a "Table Header," and Why is it Important?

The "table header" is the main row or column of a table that informs site visitors of the main "categories" of a table. For example, if you're putting together a directory of contact information, and the first row is "Name," "Position," and "Email," then that row would be the table header.

To improve accessibility for screen readers, it may also be necessary to designate the first column (and/or first row) as a table header. You will need to assign the appropriate scope for your column headers and row headers. See the section below on "header scope" if you are unfamiliar with the correct way to add scope.

This is helpful from an overall usability perspective, but it is also highly recommended that a header be added to your table as a best practice for accessibility. When a header is designated, a screen reader user (see "Use tables correctly for accessibility," above) will hear the information in this header row as the main "categories" for a table.

How to Add a Table Header

When you create a new table on your site, if the individual cells in the first row contain 40 characters or fewer, then that row will automatically be designated as the table header. You must also add a scope (see "Header Scope," below).

For a standard data table (e.g., a directory of names and contact information), the first row should be the header row for the whole table, but you may also designate other rows/columns as headers if needed.

Header Rows with More than 40 Characters

If the cells in your first row contain more than 40 characters, you must manually designate a row or column as a header, and you must add a scope (see "Header Scope," below). To designate a row or column as a header, select the row/column that you would like to be used as the table header, then select the "Table Cell Properties" button, then for "Cell Type," select "Header" from the drop-down menu:

Once a Table Header is added, you must also add the appropriate scope (see below).

What is "Header Scope," and Why is it Important?

A Table Header (see above) is the starting point for making a table accessible (see "Use tables correctly for accessibility," above). For most tables (especially tables with many rows and/or columns), you must also define a "scope" for the table header cell in order to provide more helpful information for screen reader users. Defining a scope within a column or row will help properly associate the data in a column with the corresponding data in a row within your table. Visit the WebAim Creating Accessible Tables web page(link is external) for additional information, and see the "How to Scope to Column Headers" and "How to Add Scope to Row Headers" sections below.

How to Add Scope to Column Headers

Many basic tables will require Column Headers in the first table row. For example, if you're putting together a directory of contact information, and the first row is "Name," "Position," and "Email," then that row would be the table header.

To add the scope, select the cell where you would like to start the scope, then select the "Table Cell Properties" button:

Since the first row in this table should be Column Headers, you will want to define the scope to "Column" and then select "Update all cells in row" to apply that scope to the entire first row:

Applying a table header to all cells in the first row with a column scope will result in your first row becoming a header for all visitors (including those who use screen readers):

How to Add Scope to Row Headers

If your table is anything beyond a basic table, you may also need to add row headers to improve the accessibility for screen readers.

For example, in our table above, if you had many more people in your Contact Directory, and a screen reader user started reading down the Position column, the screen reader user might hear "Faculty, Staff, Staff, Faculty, Faculty, etc." and have no idea who that "Position" information is associated with.

In such a case, it improves accessibility to add Row Headers to your first column of data as well, in this case the names themselves.

To do so, select the additional cells where you want to add a table row header. In this example, we would select the first cell in rows 2 and 3, i.e., "Jane Doe" and "John Doe." Then select the "Table Cell Properties" button and assign the scope to "Row" for the selected cells:

Applying a table header to the additional cells with row scope will result in your first column also becoming a header for all visitors, which will improve accessible for those who use screen readers:

The "table caption," if used, will show up at the top of the table, and will look a bit like the a "title" for the table. A table caption can be helpful as a brief description of what sort of data will be found in the table.

To add a table caption, add the table first, then while the table is selected, click the "Insert/Edit Table" button again, and check the box for "Table Caption," then click "Update."

The table caption field will become available at the top of your table, and you can add the table caption text accordingly.

Tables in Open Berkeley will automatically have some simple styling in order to help improve readability. If desired, some of this styling can be removed by a Site Builder (see Heading, Paragraph, and Table Classes).

Most data tables can be put together in a relatively straightforward way (standard header row across the top, with associated data cells in rows underneath), which is the recommended approach.

Instead of putting together a complex/non-standard table (such as a table with multiple layers of headers), consider using more than one table, or displaying your data in another way (there are many widgets available for displaying and organizing content, including an accessible data visualization widget).

In order to make complex tables accessible, additional markup will need to be added to the table, including tags such as <thead>, <tfoot>, <col>, and <colgroup>, and the headers attribute on table cells. This will allow Builders to associate individual table cells and colgroups to the appropriate header cells.

This will require Builders (Editors and Contributors will not be able to do this) to use the HTML source button to mark up the table, and therefore requires some HTML knowledge. See this Tables Accessibility online course(link is external) for more information on how to structure complex tables in order to make them accessible to people with disabilities.

If you will be putting together a complex table, in addition to the additional markup to make the table accessible, be sure to also check the table's responsiveness. See Responsive Tables for more information.