WordPress – responsive tables with headers in Gutenberg editor

WordPress – responsive tables with headers in Gutenberg editor

I like the new visual editor Gutenberg in WordPress, but some of its limitations are really annoying. One of the biggest – inability to set a header in a table. The other problem is that the generated tables are not responsive, i.e. in a phone they will either be extremely squeezed or scrolled horizontally, neither being usable. A common solution is to convert the table into a list. I’ll present several plugins and workarounds for tables.

Gutenberg table

Gutenberg table is very limited. It allows adding/removing columns and rows and aligning cells. Plus the simplest formatting of selected text (bold, italics). I thought of creating a table using this block, then switching to HTML to replace some <td> with <th> to convert certain cells to headers. But this approach was simply wrong, not to mention other problems (stripes, lack of responsiveness).

Advanced Gutenberg table

The Advanced Gutenberg plugin provides an “advanced” table. On top of the basic table, it allows:

  • merging cells
  • editing borders
  • changing padding
  • changing vertical alignment
  • adding header and footer

I didn’t like the generated table, even after setting (tediously) internal borders:

My related project

E-book: How to set up free WordPress platform for IT blogs

Do you want to set up a typical blog but you don’t know how to start, which plugins to use or how to customize the site? I spent a few weeks in total doing that from scratch – from learning the ecosystem to adjusting the platform to my very specific needs. Now I want to share with my experience and make the start easier for you.

TablePress, Ninja Tables

There are specialized WordPress plugins for tables, like TablePress or Ninja Tables.

They offer multiple features, including responsiveness and sorting by any column. But they also have a huge disadvantage for me. Namely, the tables have to be created in the plugin’s settings and only applied to page(s) by using a simple table inclusion block. They are really a good solution to complex product or data tables, but an overkill for simple tables as mine.

Make Tables Responsive

Finally, a plugin that does only one job: Make Tables Responsive. Simple and good enough.

My solution

I decided to use the following mixture:

  • Gutenberg table
  • Make Tables Responsive
  • custom styling to make them look lighter; by the way, I decided to remove all borders:

Result in preview:


  • the simplest to create – the first row will be automatically bold


  • not semantic – the first row will not contain <th> header cells
5 2 votes
Article Rating

Want more?


Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x