Tables

When to use TablePress

TablePress is a free and open source plugin on WordPress. It enables you to easily create and manage tables across a website. Tables are fully customizable and each is assigned a special ID code to use on a webpage.

Tables should be used to present rows and columns of data. They shouldn’t be used for large paragraphs of content or to display images.

Table example

Snowfall totals in Flagstaff

Video tutorial

In this video, we will discuss how to build a custom table in TablePress and add it to your webpage.

Watch the video tutorial: TablePress

Self guided tutorial

TablePress is a tool that allows you to easily create and manage beautiful and interactive tables on your website. Tables can be used to help organize your information in rows and columns, similar to an excel sheet.

Before adding the table to our web page we will need to build it inside of TablePress first.

Creating the table

In the editor dashboard, go to the TablePress feature on the left sidebar settings. If there is no TablePress on your site, contact the ITS web team for support. You will need to be granted access to make edits to tables.

Once TablePress is open on your screen you will see a list of existing tables, if some already exist on your site. From this dashboard, you can edit an existing table or choose to create a new one.

We will create a new table for our example. 

Select the “Add new” tab at the top. 

Enter your table name and the number of desired rows and columns. You can also add a table description if you’d like, but this is not required. 

Once this information is entered, your table will automatically be given a Table ID. This is important to know for later.

Enter your content into the table.

Under the table manipulation section, you can add or remove rows or columns if you added too many or not enough cells for your table.

There are some table options that will affect the table’s display, such as making the first row the table header, or having alternating background colors of consecutive rows. 

Always remember to uncheck the first box in the “Features of the DataTables JavaScript library”. Uncheck the “Use DataTables”.

Once the content and settings look good, save our changes. 

Adding the table to your webpage

Now that the table is built in TablePress, it can be added onto a webpage.

In the page edit, click the plus sign and search “short code”. Select the short code block.

In the blank short code space, add our tables’ unique short code. You can find this short code in the top right corner of the TablePress editor.

Save your work and preview the page. If the table looks good, it is ready to submit to the workflow. 

Next topic

Quality assurance checklist

Don’t hit publish on your new site before making sure everything’s in order, from functionality to design. Read the quality assurance checklist to double-check your work.