Although WordPress allows you to insert tables directly, they are not that easy to use and there are limited options for making them adapt on mobile phones. Instead we use a plugin called TablePress to display the times of church services or club events, but it can also be used for a list of committee members, or anything else that works well as a table.
Tables are designed and edited separately from the page they appear in, and we use a shortcode or a TablePress block on the page itself to pull in the pre-prepared table.
To access the table editor, click on TablePress in the dashboard left sidebar. The first thing you will see is a list of existing tables and there is usually at least one, containing your events programme, service times or whatever.
Click on a table name, e.g. Service Times to edit the table.
The table editing screen is quite long but is broken into sections.
Table Content
The table content looks rather like a spread sheet and you can click in any cell to edit it. You can right click on a cell to see more options. You can also select particular rows and columns using the mouse, much as you do in Excel, and right click or use the Table Manipulation options at the bottom.
Table Manipulation
Generally you can ignore the top row as these are infrequently used operation. More useful are the items below which you can use to change what is displayed, and these mostly use the row and column selection. The description below refers to rows, but these options can also be used with columns.
Duplicate: makes an exact copy of each selected row and inserts it below the copied row.
Insert: inserts new empty rows before the selected row.
Delete: deletes the selected rows.
Hide: useful for hiding events which have already happened without actually deleting them. Hidden rows are marked in red.
Show: shows rows that were previously hidden.
Add: adds the given number of rows at the end of the table.
Insert Link: Use this if you want to insert a link from the text in your table to another page on the site. You might want to do this if you have a separate page giving event details. You need to click on Insert Link first, then click the position in the text where you want to insert the link. You will then be prompted to enter the URL to jump to and the text to use for the link (the bit that is normally underlined).
Advanced Editor: Use this if you want to add more styling to the text within a table cell, e.g. bold, italics or links. Sadly this isn’t as visual as the rest of the WordPress editor but it does the job.
Please do not insert images into the table. Due to the way these are stored they will not be displayed within tables.
Table Options
These control how the table is displayed and usually you will want the options as shown above. The word programme in Extra CSS classes is used for event programmes to make them work better on narrow screens such as mobile.
Site Visitors
There are other options which allow tables to be sortable and generally these should be disabled by un-ticking the first box.
Once your table is set up, click Preview to see what your table will look like, and Save Changes to update the live table.
Create a New Table
There are two ways to create a new table:
- Add a new table and type in the data
- Import the data directly from a spreadsheet
If you already have a spreadsheet and you are familiar with saving in different formats then use the second method, otherwise stick with the first.
Add New Table
Click on Add New, enter the name of you new table and the number of rows and columns then click Add Table. This will create a table and you can then edit it exactly as for an existing table.
Import from Spreadsheet
Firstly you need to save your spreadsheet as a CSV file. Next click on Import.
Select File Upload and click on the grey box or drag and drop your CSV file directly from a Windows Explorer window. Click on Import to add this as a new table. A new table will be created with the same number of rows and columns as are defined in your CSV file and you can then edit it exactly as for an existing table.
Note that Excel (or another spreadsheet program) may save the CSV file with more columns than you are actually using. When you look at the data in TablePress, every cell you can see will be displayed, so if you see blank rows or columns in TablePress you need to delete them as described above under Table Manipulation.
Be aware of how your data will look on a small screen such as a mobile phone. Generally you should restrict your table to 3 columns if you can, otherwise you could end up with a lot of ugly wrapped text when viewed on a small display.
Showing a Table on a Page
Edit the page where you would like the table to appear. There are two ways to insert a table:
Historically you would insert tables using a shortcode, so all sites made prior to January 2023 would have used this method. In the block editor, you can add or edit a Shortcode block. If you look at your table in TablePress you will see the shortcode listed with the table, something like [table id=1 /]. In the Shortcode block, paste in the code, including the square brackets.
Since January 2023, TablePress has its own WordPress block which makes it easier to select and preview tables. From the block selector, start typing TablePress and the block will quickly show up in the list. You can then select the table you want from the list on the right of the display.
Undoing Changes
Just be aware that unlike WordPress pages there is no record of changes you make to tables. All edits are permanent and there is no undo option once you have saved the table. One thing you can do is to Hide rows or columns rather than deleting them. In that case the data is preserved (and shown in the table editor with a pink background) but is not shown on the live website.
« Menus and Links Up Contact Forms »