Tables

Tables and WordPress

Boise State uses TablePress to display tabular data on web pages.

TablePress is a WordPress plugin that enables you to create and manage tables on your site. No HTML knowledge is required. TablePress provides a user-friendly interface allows you to easily manage and edit table data.

Keep in mind that tables should only be used for displaying tabular data and never used for page layout. Using tables for design purposes causes the responsive nature of the page to break, and hurts user accessibility.

Tables and Panels

Do not use TablePress tables within Panel; table responsiveness and layout may break if used within a Panel.

Creating Tables

TablePress from Dashboard

To create a table, find TablePress in the WordPress dashboard and select TablePress > Add New Table.

When you add a new table, you’ll be prompted to name it and select the number of rows and columns you would like included. If your site uses tables frequently, it may be helpful to add a description of what the table is used for as well.

Click Add Table at the bottom of the page when those are set.

Table Options

With your table created, you can begin filling in the cells and organizing your content. The Table Manipulation pane offers options to easily insert links, images, and to add more rows or columns.

Note that the Insert options will open a prompt asking you to click into the cell you’d like to work with — click “OK” to close the prompt and then click into the cell. If you are proficient in HTML coding, you may also add HTML to the cells.

Table Features and Accessibility

Tables are subject to the same accessibility standards as the rest of your content. TablePress makes it easy to add accessibility features like headers and search functions, but some features are not yet accessible. See our recommendations below on what features should and should not be enabled.

TablePress table with header row and search option highlighted

Table Options

The Table Options pane, in addition to offering alternating row colors, is where you can enable the Table Header Row. It is important to mark the checkbox for Table Head Row and to use the first row to label your header columns, but at this time we recommend not marking the Table Foot Row. If the footer option is checked, TablePress uses the incorrect tag which can introduce accessibility errors.

Recommended Table Options

To create accessible tables, we recommend using the following Table Options in TablePress

Table OptionsCheck or UncheckNotes
Table Head RowCheckAlways select the table head row for each table. This add the required "table head" tag for accessibility.
Table Foot RowUncheckLeave this option unchecked as TablePress assigns the incorrect tag making the table appear to have two header rows
Alternating Row ColorsCheck or UncheckAt this time there are no known accessibility concerns with alternating row colors. This option can be used or left turned off.
Row Hover highlightingCheck or UncheckAt this time there are no known accessibility concerns with row hover highlighting. This option can be used or left turned off.
Print Table NameCheck or UncheckAt this time there are no known accessibility concerns with print table name. This option can be used or left turned off. However, if you leave this option off, we do recommend you list the table name somewhere on the main webpage, for example as a header, so users understand the purpose of the table.
Print Table DescriptionCheck or UncheckAt this time there are no known accessibility concerns with print table description. This option can be used or left turned off. However, if you leave this option off, we do recommend you indicate the purpose of the table somewhere on the main webpage, for example a brief paragraph description, so users understand the purpose of the table.

JavaScript

While TablePress offers a variety of JavaScript features in the JavaScript library pane, many of these features are not accessible. Boise State admins should only use the Search/Filtering option. All other Javascript features create accessibility issues and should not be utilized.

Recommended JavaScript Features

To create accessible tables, we recommend using the following JavaScript Features in TablePress

JavaScript Library FeaturesCheck or UncheckNotes
Use DataTablesCheck or UncheckIf you are using any of the accessible JavaScript features, you'll first have to check this option.
SortingUncheckAt this time there are accessibility concerns with sorting. This option should be left unchecked.
Search/FilteringCheck or UncheckAt this time there are no known accessibility concerns with search/filtering. This option can be used or left turned off.
PaginationUncheckAt this time there are accessibility concerns with pagination. This option should be left unchecked.
Pagination Length ChangeUncheckAt this time there are accessibility concerns with pagination length. This option should be left unchecked.
InfoUncheckAt this time there are accessibility concerns with info. This option should be left unchecked.
Horizontal ScrollingCheck or UncheckAt this time there are no known accessibility concerns with horizontal scrolling. This option can be used or left turned off.

For more information on how screen readers interact with tables, review the following WebAIM article on Creating Accessible Tables.

Placing the table

When you are prepared to place the table on your website, copy the Table ID shortcode on the top-right of the page and click Save Changes. Once back on the desired page, paste the shortcode into the area you would like the table to appear, surrounded by opening and closing bracket characters. [table id=1 /]

If you need further assistance in creating tables, view the Official TablePress Documentation or the WPBeginner TablePress Tutorial to get started.

Back To Top