How to Vertically Align WordPress Tables in Gutenberg
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.
This default block has three alignment options:
- Left (horizontal)
- Center (horizontal)
- Right (horizontal)
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.
This next image is a close-up of these options. You can choose from these three options:
- Align top
- Align middle
- Align bottom
In this next image I've created three cells, and given an example of all three alignments.
Gutenberg 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.