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

Video guide to the Advanced Table block

How to create the Advanced Table block

You can create a table by clicking the Advanced Table button in the PublishPress Blocks category.

After choosing the Advanced Table block, you can choose the number of columns and rows for your layout:

Rows, columns and cells in the Advanced Table block

You can edit the table after setting the number of columns and rows. The options include:

• Add Row Before
• Add Row After
• Delete Row
• Add Column Before
• Add Column After
• Delete Column
• Split Merged Cells
• Merge Cells

How to merge cells

In Mac you just need to click one cell (NOT select like you would do with text). Then keep pressed shift key and click on the other cell you want to merge with. As last step click on the table icon options > Merge cells.

Settings for the Advanced Table block

More table settings can be modified in the right sidebar:

Styles

• Default
• Stripes

Table Settings

• Max width: Set this to 0 to make max-width equivalent to 100%
• Fixed width table cells: Enabled or disabled.
• Table header: Enabled or disabled.
• Table footer: Enabled or disabled.
• Border collapsed: Enabled or disabled.

Cell Settings

• Color Settings: 
  • Background Color
  • Text Color
• Border:
  • Border Style
  • Border Width
  • Border Color
• Padding:
  • Padding Top
  • Padding Right
  • Padding Bottom
  • Padding Left
• Text Alignment:
  • Horizontal Align
  • Vertical Align

Default settings for all your Advanced Table blocks

You can set default options for every Advanced Table block added to your site. This is possible with the Default Blocks Config feature and it allows you to create a consistent look-and-feel for all your tables.

• Go to PublishPress Blocks in your WordPress admin menu.
• Click Configuration, then Default Blocks Config.
• Click Advanced Table.

Horizontal scrollbar support for Advanced Table

This is very useful for large tables in tablets and mobile.

• Select your Advanced Table block (not just a cell! The block).
• Click on the 3 points to reveal block settings.
• Click “Group”

• Select the Group block that now wraps the table.
• In the sidebar, go to Advanced > Additional CSS class(es)
• Type: wp-block-table

If you preview your table in small devices in frontend, you'll see an horizontal scrollbar when the content can't fit the screen.