TablePress Component

The TablePress feature provides the ability to create complex tables. The interface allows you to easily edit table data. Your tables can contain any type of data, like numbers, text, images, links, and even math formulas! In addition, features like live sorting, pagination, searching, and more can be enabled for your site’s visitors.

How to Use TablePress

The TablePress Component allows you to create custom tables with embedded links and images, without having to implement custom HTML code that could conflict with the RED Theme. TablePress also allows you to stylize/format the text of the cells and import/export .csv files to ease in table creation. As an added bonus, you can allow visitors to sort the table on the live site, or keep it static (it is set to allow this by default).

In order to use the TablePress Component, you must first create a table with the TablePress plugin. Log in to your site, and select “TablePress” from the dashboard.  You will then be able to create a new table, edit an existing one, or import/export a .csv file. After you create a table, you can then add the TablePress Component to any page and it will allow you to select from a drop-down, one of your pre-made tables.

Table Press Example

Link ExamplesImage ExamplesFormatting Examples
Here is an example link to our Red Tutorial.

04/13/2016
therapy dog at Doggypalooza, an event sponsored by the Student Activities Board (SAB)
Photo: Jenny Fontaine

Example of Italics
Here is an example of linking to an email address.

10/08/2009
Sears/Willis Tower at sunset

Example of Bold and Underlined

Accessibility Requirements

The accessibility of TablePress is dependent on the TablePress service. However, content accessibility is your responsibility.

Title Fields (for tables this includes Row and Column Headers)

Titles are required in most components to comply with the rule that headings H1-H6 must be used before a section of content to describe its context. You may select the “Hide Title” option if you don’t want it displayed, however, a site visitor using a screen reader will hear those titles. This means they should be descriptive and unique. If you only enter “Title” for example, the user will hear “title, title, title,” etc. as they tab through your content blocks. They will have no context to know if that is information they should read.

Image Alt Text Fields

Alt text should describe the image for visually impaired users who visit your website and for those whose browsers block images. The text should give a brief description of the image. DO NOT USE phrases like “image of,” “picture of,” or “screenshot of” in your ALT Text. In addition, if you use images that have text in the image itself, that cannot be read by a screen reader. That text should be included in the alt text, a caption or other text near the image.

Link Text

Text links in your content should not use a URL as the link text. It should have meaningful text rather than using “click here” or “read more” Instead, use the page title or a description of the page where the link leads.

Link text that is in context with the content where it is pointing gives all users better information about the purpose of the link.

Users interact with links in various ways, including:

  • Screen reader users can generate a list of links and navigate them alphabetically.
  • Redundant or ambiguous link text such as “More” is meaningless in this context.
  • Users of speech recognition technology can select a link with a voice command like “click” followed by the link text. Therefore it is also helpful to use unique link text that is short and easy to say.
  • Users who don’t need assistive technology often skim and scan your content, a link that gives more context can prompt them to click through to the content they seek.
  • Meaningful link text may often align with key terms or phrases used by people searching for your site. Using them for link text may improve your SEO.

All All Embeds, Forms & Tables Components