Tables

To create tables for your site, you will use the TablePress plugin. You can create both simple and advanced tables, as well as import and export tables.

Creating a table

Add new table page

Saving your work

As you create the table, it is a good idea to frequently go to click on the “Save Changes” button at the top or bottom of the page to save your work. Make certain you save it one last time before leaving the page.

Table Content

After adding the table, scroll down to see “Table Content.” You will need to enter content into each cell of the table. The columns are labeled with uppercase letters in alphabetical order (A = column 1, B = column 2, C = column 3, …). The rows are labeled numerically. A “cell” is just a combination of row and column, for example, A3 or C2.

You will notice a check box next to each row and beneath each column, you will use these boxes to select rows or columns when using the next section, “Table Manipulation.”

Table content box

Table Manipulation

This is where you can add or delete rows and columns. When you choose “Insert” for rows, one row will be added at the bottom of the table. To add multiple rows, use the “Add” feature and select the number of rows needed. When you choose “Insert” for columns, a column will be added after the farthest right column. Again, you can use the “Add” feature to add multiple columns at once. To change the order of rows or columns, check the box for a row or column and then drag-and-drop it to a new location.

table manipulation box

The combine cells options allow you to set rowspan and colspan — this groups cells from a column together or row together.

An example of a table with cells in a column combined:

example of using rowspan for a table

To combine cells within the same column, you would use rowspan. Click on the Combine cells: in a column (rowspan) button. A dialogue box will pop up explaining that “To combine cells within a column, click into the cell below the cell that has the content the combined cells shall have.” Click “Ok” to continue and click on the cell to which you want to apply the formatting. The example below uses cells A3 through A5.

how to add rowspan into table

Table Options

This section allows you to designate your table header row which enhances accessibility and enables header styling for the row as well. Other options include the ability to have different colors for alternating rows and custom css.

Features

The built-in JavaScript library for TablePress allows for features such as sorting, searching and filtering, pagination and scrolling.

Publishing Your Table

To insert your table into a page or post, go to the page/post that you would like to edit and click on the spot where you want the table to appear. Now go to the icon set above your text box and find and click on the TablePress button (highlighted with a red box in the image below).

editing menu highlighting tablepress button

A new window will pop up with a list of your tables. Find the table(s) you wish to insert (you can search for them with the search field) and click on the “Insert Shortcode” button.

You will see the Shortcode appear in the page. It will look like this with your table id number: [table id=2 /]

Read more about TablePress.