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 Panels; table responsiveness and layout may break if used within a Panel.
Creating Tables
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.
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 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.
Accessibility Issues with Table Options
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.
To create accessible tables, please only use the following features in TablePress:
| Table Options | Check or Uncheck | Notes |
|---|---|---|
| Table Head Row | Check | Always select the table head row for each table. This add the required "table head" tag for accessibility. |
| Table Foot Row | Uncheck | Leave this option unchecked as TablePress assigns the incorrect tag making the table appear to have two header rows |
| Alternating Row Colors | Check or Uncheck | At this time there are no known accessibility concerns with alternating row colors. This option can be used or left turned off. |
| Row Hover highlighting | Uncheck | Leave this option unchecked as the hover feature introduces significant navigation barriers for screen reader users making the information in the table completely inaccessible by the screen reader. |
| Print Table Name | Check or Uncheck | At this time there are no known accessibility concerns with print table name. If you leave this option on, select to show the table name above the table. 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 Description | Check or Uncheck | At this time there are no known accessibility concerns with print table description. If you leave this option on, select to show the table description above the table. 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. |
DataTables JavaScript Library
While TablePress offers a variety of features in the DataTables JavaScript library pane, many of these features are not accessible. Boise State admins should only use the Search/Filtering option. All other DataTables JavaScript library features create accessibility issues and should not be utilized.
To create accessible tables, please only use the following DataTables JavaScript library features in TablePress
| JavaScript Library Features | Check or Uncheck | Notes |
|---|---|---|
| Use DataTables | Check or Uncheck | If you are using any of the accessible JavaScript features, you must check this option. |
| Sorting | Check or Uncheck | At this time there are no known accessibility concerns with sorting. This option can be used or left turned off. If you choose this option, also include the following table description displayed above the table: Sort columns by ascending or descending order. |
| Search/Filtering | Check or Uncheck | At this time there are no known accessibility concerns with search/filtering. This option can be used or left turned off. If you choose this option, also include the following table description displayed above the table: Use the search field to search and filter this table. |
| Pagination | Check or Uncheck | At this time there are no known accessibility concerns with pagination. This option can be used or left turned off. If you choose this option, also include the following table description displayed above the table: By default, 10 entries are listed in the table. Use the drop-down field to adjust number of entries shown and use the Previous and Next buttons to navigate to additional table entries. |
| Pagination Length Change | Check or Uncheck | At this time there are no known accessibility concerns with pagination length. This option can be used or left turned off. If you choose this option and adjust the default number of page entries, please reflect this change in the pagination description. |
| Info | Check or Uncheck | At this time there are no known accessibility concerns with info. This option can be used or left off. If you are using pagination, we recommend turning this feature on as well. |
| Horizontal Scrolling | Check or Uncheck | At this time there are no known accessibility concerns with horizontal scrolling. This option can be used or left turned off. |
More Information About Accessible Tables
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.