December 3, 2023

I was working with some friends on a club website and “all of a sudden” we were getting strange results when we needed to add a row to a WordPress table using the block editor.

Our table looked like this:

Great Club Calendar
DateEventLocationTime
2023-05-15Special EventTucson, AZ6:00pm – 8:30pm
2023-06-23Great EventTucson, AZ7:00pm
The WordPress table that won’t add a row with more than one column

The Problem

When we needed to add a row, this is what we got after using the block editor and choosing “Insert row after” the last row.

Great Club Calendar
DateEventLocationTime
2023-05-15Special EventTucson, AZ6:00pm – 8:30pm
2023-06-23Great EventTucson, AZ7:00pm
 
The table after “Insert row after”

The apparent cause

When trying to edit the HTML of a table, there many changes that cause the “This block contains unexpected or invalid content” message. (for example, adding style to a <tr> tag, i.e. <tr style=”display:none”></tr>).

This makes working with tables in the base block editor somewhat limiting. Apparently we “got away” with modifying our table with the first row consisting of a single <td> tag that spans four columns. And we didn’t get the “unexpected or invalid content” error. Yea!

<tr><td class="has-text-align-center" data-align="center" colspan="4"><strong>Great Club Calendar</strong></td><tr>'

But… the apparent side effect seems to be that “inserting a row” will only insert a single column row!

Solutions

Here are three solutions we used, with the first solution being the easiest to implement. Most Google searches returned suggested solutions that used a plugin to solve various table formatting problems. We wanted to limit the use of plugins so we were looking for ways to go forward without another plugin.

Solution 1 – Add a four column header row and a one line HTML script after the table

If you modify the table to have a four column empty row at the beginning of the table, then “insert row” will work correctly. Add this HTML to the table for the first two rows:

<tr><td></td><td></td><td></td><td></td></tr>
<tr><td class="has-text-align-center" data-align="center" colspan="4"><strong>Great Club Calendar</strong></td></tr>
 
Great Club Calendar
DateEventLocationTime
2023-05-15Special EventTucson, AZ6:00pm – 8:30pm
2023-06-23Great EventTucson, AZ7:00pm
Yea insertrowworks!
A table with an empty four column first row, but “insert row” works!

After the table add this custom HTML block:

<script>jQuery("tr:nth-child(1)").hide();</script>
 
Great Club Calendar
DateEventLocationTime
2023-05-15Special EventTucson, AZ6:00pm – 8:30pm
2023-06-23Great EventTucson, AZ7:00pm
Yea insertrowworks!
A table with an hidden empty four column first row, but “insert row” works!

Success! Now you can edit the table visually and add rows as expected!

Ugly Solutions

For completeness here are other ways we solved the problem. Neither of these methods are recommended, and we won’t drag you through the details.

Solution 2 – Delete the first row, insert row(s) and then add back the first row. Ugly!

Solution 3 – Copy the table html to a table friendly editor. Add necessary lines. Copy and paste the modified HTML into the WP table. Ugly!! Ugly!!

Environment

This problem was relevant to:

Date: 2023-06
WordPress 6.2.2
ChromeBlog 1.0.0