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:

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:
CSS
styles.css

Result in preview:

Pros:

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

Cons:

  • not semantic – the first row will not contain <th> header cells

Leave a Reply

avatar
  Subscribe  
Notify of