Converting your Tables in Gutenberg
If you’re unable to edit your table in the new editor, you have 3 options to fix this issue:
Utilize the table block in Gutenberg to retain on-page editing capabilities.
The table block is intended for use with simple tables. If you have a complicated table, it is suggested you use TablePress. However, if you are not confident with TablePress, there are ways to work around the restrictions of the new table block.When the block is inserted, you will have to select how many columns and rows you’ll need. You can change this later.
It is suggested you convert the table so that the side with the least number of rows/columns is on the top, see the images above and below. This will help you be able to edit the table easily as well as make the table easily viewable on all screen types.
You can edit the table through the pop up over the block and change the styles in the right sidebar. Make sure fixed width cells is on to ensure your table resizes on mobile devices. You can not use span columns.
Because you are unable to use span columns, if you have a table like the table at the top of the page which has the title within the table, you will have to change it so that the title is now a header block. See the image below.
Create a TablePress table and insert into the page as a shortcode.
Using the content from your table, create a new TablePress table.
Fill in the table name and insert the amount of columns and rows you will need on your table. You can change this later.
It is suggested you convert the table so that the side with the least number of rows/columns is on the top. This will help you be able to edit the table easily as well as make the table easily viewable on all screen types.
You can now start copying and pasting in your table content into the cells numbered and lettered. You can merge cells into a colspan in TablePress.
To combine adjacent cells in a row, add the keyword
#colspan#to the cell to the right of the one with the content for the combined cell by using the corresponding button.
To combine adjacent cells in a column, add the keyword
#rowspan#to the cell below the one with the content for the combined cell by using the corresponding button.
When you’re happy with how the table preview looks, save changes and copy the shortcode in the top right. (see the image above)
Go to the page you want the table to appear on and add a new shortcode block. Paste the shortcode for the table in the block. Save your page, and you will see the table show up on the page.
Create a table in-page as an HTML table.
Using the HTML block, code and insert the HTML table you would like to utilize. Please only utilize this option if you are familiar with HTML and have knowledge on how to create a table optimized for mobile.
You can utilize different websites such as the HTML Table Generator but please ensure that the first row is set to be a header and the table is responsive. (bottom left of the table editing area)
Last updated: 4/16/2019