The following are instructions on how to use the WordPress TablePress plugin to build data tables that are more accessible to people using assistive technology and responsive on small devices. To start building your tables contact the COFA web team to activate the TablePress plugin on your site at cofawebmaster@austin.utexas.edu.
Create a New Table
- From Your Dashboard select TablePress > Add New Table.
- For accessibility purposes, give your table a descriptive table name which will be displayed as the title of your table. In Table Options select the checkbox for Print Table Name and select above for the position.
- Add a simple explanation of your table’s content to the description section. Your description will appear as a caption and is an accessibility requirement. In Table Options select Print Table Description. The caption can be set to appear either above or below your table. Visit this resource for examples of descriptive table captions.
- Select the initial number of rows and number of columns.
- Click Add Table to begin adding content.
Adding Tabular Data
- Designate the first row of your table as your Table Header Row and add your headings for each row. Under Table Options select the checkbox for Table Head Row.
- Next add your tabular data. It can be added manually or imported into your table.
- If you need additional Columns & Rows, use the Table Manipulation section to add them.
- Preview your table results and when you are satisfied, click Save Changes.
Set Table Options and Features
Below the Table Content section there are two more sections with a number of options, such as adding a search box, or allowing visitors to sort by header or add pagination. We’ve highlighted a couple of the optional items, but feel free to play around with any of the available options and ask us any questions you might have.
- Alternate Row Colors: selecting this box will give you alternate grey and white rows.
- Row Hover Highlighting: Selecting this box will give you a mouse over color change.
In the Features of the DataTables JavaScript library section, everything is selected by default. Feel free to uncheck whatever features you don’t wish to use. If you’d like to turn off all of these features, uncheck Use DataTables.
- To add a search box to the top of your table, select the checkbox for Search/Filtering.
Important: Remember to click Save Changes after making your changes!
Add the Table to a Page
You can then add your table to a page or post by pasting in your table’s shortcode. This can be found in the Table Information section:
Edit an Existing Table
If you need to make an edit to an existing table, you can find it under TablePress > All Tables.
Styling
The COFA Web Team has added style codes to your site to give your tables the following UT branded style. Please contact us if you’d like to have a conversation about changing your table style, color, etc.
Table of Famous Dogs & Cats of the World
Famous Dogs | Dog Country of Origin | Famous Cats | Cat Country of Origin |
---|---|---|---|
Benji | The United States | Grumpy Cat | The World Wide Web |
Lassie | The British Isles | Cringer | The Realm of Eternia |
Milou (Snowy) | France | Hello Kitty | Japan |
Rin Tin Tin | France | Foot-Foot | The United States |
Snoopy | The United States | Keyboard Cat | The World Wide Web |
Each row in column three describes a famous cat in popular culture, while column four describes the country of origin for each cat in the corresponding rows from column three.