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 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
<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
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.
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