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.
Table of contents
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:
Hey, I've been using WordPress for years. In fact, I have learned about a lot of useful plugins and I have done plenty of customizations to build a great blogging tool. Would you be interested in launching own blogging platform on WordPress?
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:
Pros:
- the simplest to create – the first row will be automatically bold
Cons:
- not semantic – the first row will not contain
<th>header cells