How to Vertically Align WordPress Tables in Gutenberg

Vertically Align Tables

The Gutenberg editor is good, and with the PublishPress Blocks plugin, it’s great!

PublishPress Blocks builds on top of the basic Gutenberg editor and add all sorts of useful extra features. For example, with PublishPress Blocks you have more options for the table block.

The Advanced Table block is based on the default Table block in Gutenberg. This improved version of the block has tons of extra table features including advanced styling such as margin, padding, alignment, colors and more. Click here to see a demo and click here to see the default Table block vs the Advanced Table block.

One PublishPress Blocks user needed to vertically align text in a table. This guide will show you how to do that in Gutenberg.


The default Gutenberg Table Block

WordPress does arrive with a Table block that you can use in your posts.

Default Table Blocks
Default Table Blocks

This default block has three alignment options:

  • Left (horizontal)
  • Center (horizontal)
  • Right (horizontal)
Left Right Align
Left Right Align

However, there are no vertical alignment options with the default Table block. For that, you will need to install the PublishPress Blocks plugin.


The Advanced Table Blocks

This block is available with PublishPress Blocks.

With this block, you will be able to specify a vertical alignment for each cell.

  • Create an Advanced Table block.
  • Select a cell in your table.
  • Look in the right sidebar under “Cell Settings”.
  • Open the “Text Alignment” area.
  • There will be a “Vertical Align” area, as you can see in the image below.
Vertical Alignment
Vertical Alignment

This next image is a close-up of these options. You can choose from these three options:

  • Align top
  • Align middle
  • Align bottom
Align Top
Align Top

In this next image I've created three cells, and given an example of all three alignments.

Alignment Table
Alignment Table

Summary

As we said at the beginning, Gutenberg is good, and with PublishPress Blocks plugin, it’s great! PublishPress Blocks has a ton of little extra features like this that will make your life easier.

PublishPress Blocks has everything you need to build professional websites with WordPress. The blocks include layout options, sliders, buttons, icons, image galleries, maps, tabs, testimonials, accordions, and much more.

Tags:


Leave a Reply

Your email address will not be published. Required fields are marked *

Professional publishing plugins for WordPress! Get PublishPress