WordPress prior to 5.0 did not handle tables well at all, and WordPress 5.0 has limited support for tables, so we use a plugin called TablePress to do this. This is what we normally use to display the club’s programme of events, but it can also be used for a list of committee members, past presidents, 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 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.
Click on a table name, e.g. Programme 2018 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 also use the checkboxes to select particular rows and columns.
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 checkboxes. The description below refers to rows, but these options can also be used with columns.
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.
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.
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 or a Christmas lunch menu. 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 extra CSS class Programme is one normally added specifically to the events programme table and it adjusts the column widths to make them work better on small screens. You will not normally need this in other tables.
Javascript Library
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 Choose File button. Navigate to your saved CSV file and click on OK. 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.
In the Block editor you currently have to insert tables using 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 /]. Add a Shortcode block and paste in the code, including the square brackets.
In the Classic editor move the cursor to the place you want the table, usually an empty line, and use the TablePress button on the toolbar to open the table selection window.
In the list of available tables click on Insert Shortcode for the one you want.
This will add the correct shortcode to your page, something like [table id=1 /]
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 Home Contact Forms »