Skip to main content

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.

Table Accessibility

Tables can create barriers for a variety of users. Before creating a table for your content ask “Is a table necessary?” If you can display your content in a format other than a table, such as a list of items, that may be more accessible.

If you do need to create a table follow these general guidelines:

  • Keep it simple
  • One piece of data per cell
  • No blank cells
  • Do not combine or merge rows or columns
  • Follow the recommendations on this page creating accessible tables with TablePress

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

Table Manipulation

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.

Accessibility Issues with Table Manipulation

FeatureDescriptionAccessibility Notes
Insert LinkAllows you to add a hyperlink to the a selected cellUse with caution - Must follow all standards for creating accessible links
Insert ImageAllows you to add an image to the a selected cellUse with caution - Must follow all standards for creating accessible images
Advanced EditorOpens the advanced editorUse with caution - Must follow all standards for creating accessible text
Combine/MergeCombines or merges selected cellsNo - Do not use in table
Duplicate, Insert, DeleteAllows you to duplicate, insert, or delete a selected row or column within the table contentYes - no impact on table accessibility
Move up, Move downAllows you to move a selected row or up or down within the table contentYes - no impact on table accessibility
Move left, Move rightAllows you to move a selected row or left or right within the table contentYes - no impact on table accessibility
Hide, ShowAllows you to Hide or Show a selected row or column in the table contentYes - no impact on table accessibility
AddAllows you to add a specific number or rows or columns to the table contentYes - no impact on table accessibility

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 OptionsCheck or UncheckAccessibility Notes
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 highlightingUncheckLeave 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 NameCheck or UncheckAt 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 DescriptionCheck or UncheckAt 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.
Extra CSS ClassesLeave blankAdditional CSS classes for styling purposes can be entered here - may not be compatible with web theme or standards, contact WordPress Support for questions

Table Features for Site Visitors

TablePress offers a variety of features for site visitors to interact with the table. However many of these features are not accessible or could introduce barriers for some users.

To create accessible tables, please only use the following DataTables JavaScript library features in TablePress

Table Features for Site VisitorsCheck or UncheckAccessibility Notes
Use DataTablesCheck or UncheckIf you are using any of the accessible JavaScript features, you must check this option. We recommend leaving this unchecked for small or simple tables.
SortingCheck or UncheckAt 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/FilteringCheck or UncheckAt 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.
PaginationCheck or UncheckAt 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 ChangeCheck or UncheckUse with Caution - previous and next navigation links can be confusing for keyboard-only navigation. 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.
InfoCheck or UncheckAt this time there are no known accessibility concerns with info. This option can be used or left off. If you are using pagination or search, we recommend turning this feature on as well.
Horizontal ScrollingUncheckDo not use - Horizontal scrolling is not keyboard accessible and users can't access content using their keyboard alone.
Custom CommandsLeave blankUse with caution - may not be compatible with web theme or standards. Additional parameters from the DataTables documentation to be added to the JS call. For advanced use only, contact WordPress Support for questions

Buttons

Buttons are available within TablePress to allow the user to download a version of the table as a CSV, PDF, Excel file, or print view. However, these buttons do not have accessible labels which can introduce barriers for some users. If you choose to use buttons with your table, follow these guidelines:

  • Only use on one table per page
  • Add a table description to alert users of the buttons
  • Do not use ColVis or Copy

Column Filter Dropdowns

At this time, the Column Filters Dropdowns are not accessible or compatible with our web theme.

Fixed Rows and Fixed Columns

At this time, the Fixed Rows and Fixed Columns features are not accessible or compatible with our web theme.

Behavior on Different Screen Sizes (Responsiveness)

If you do not select an option for behavior on different screens, your table content may not be accessible for all users. If your table is viewed on a mobile device or under magnification, some users may not access all content. We recommend using Scroll. If you require another view, contact WordPress Support for assistance and accessibility testing.

Behavior on Different Screen Sizes (Responsiveness)Check or UncheckAccessibility Notes
NoneDefault CheckNone is the default status for responsiveness. If your table is viewed on a mobile device or under nagnification, some users may not access all content.
ScrollCheckWorks well with keyboard and screen reader. Buttons are not necessary for keyboard or screen reader navigation
CollapseUncheckNot recommended - Keyboard compatible but doesn't announce actions with screen reader.
ModalUncheckNot recommended - Keyboard accessible. However, modal window isn't accessible by screen reader.
StackCheck or UncheckUse with caution - may be challenging to view in large tables. Keyboard and screen reader accessible.
FlipUncheckNot recommended

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.

Back To Top