Kadence Tutorial: Advanced Table Blocks Explained

In content presentation, a well-structured and visually hierarchical table layout canEffective presentation of key information, often used in scenarios such as product price comparison, course scheduling, and functional parameter descriptions.Kadence Blocks plug-in in the Advanced Table Blocks for WordPress Users are provided with the ability to build forms more freely.

compared to native Gutenberg Forms module.Advanced Table Support multi-layer nesting, responsive layout control, custom style settings, more closely match the actual application requirements.

Add Advanced Table block

exist Gutenberg In the editor, click on the "+" to add a block, search and insert the Advanced TableThe

When first inserted, you will be prompted to set the initial number of rows and columns. It is recommended that you set the basic size according to the expected content structure, and then you can add or delete rows and columns at any time.

Each cell in a table (Table Data) contains paragraph blocks by default and supports the insertion of any other Kadence Blocks modules such as images, icons, buttons, lists, etc.

Inserting content with nested blocks

After clicking on any cell, you can enter text directly.

You can also press / key or click the plus sign to quickly insert other Gutenberg blocks to achieve a nested effect.

This approach is suitable for displaying more complex content structures, such as mixed graphics, list-type data, and price lists with buttons.

Table Row Management

Each row can be individually selected and the up and down positions adjusted by the arrows in the toolbar.

Click the "+" button at the end of a line to quickly insert a new line above or below the current line, or to the top or bottom.

Each row supports independent style settings, including:

• Background color and hover background color
• Line height (supports px, em, vh)
• Responsive display settings: desktop, tablet, and mobile adjusted separately

Table column (Column) management

Each column in the table is presented in a Table Data block.

Columns can be moved through the toolbar arrow icons; clicking on the plus icon adds a new column, which can be inserted in any position.

Each cell supports setting independent inner margins (Padding), which can also be adjusted responsively.

If you need to control the width of each column finely, you can turn off the "Auto Width", manually enter percentage or pixel values to improve the adaptation on different devices.

Overall Form Settings

After selecting the entire Advanced Table After the block, global settings can be made for the entire form module.

Basic settings

• Number of rows and columns: manually adjustable
• The first row is set as the table header: set HTML The label is switched to <th>and automatically apply header font styles
• First column as header: also applies to vertical data lists

Fixed row and column functionality (requires Kadence Blocks Pro)

• Fixed first row (Sticky First Row): often used in long forms to fix the title of the display
• Sticky First Column: suitable for parametric comparison tables.

The Maximum Height or Maximum Width fields need to be set to enable the fixed display effect for scrolling conditions.

Horizontal scrolling

• Enable Overflow X scrolling to slide horizontally through table content on mobile or narrow screen devices, effectively solving the problem of truncated content due to too many columns.

Style and Visual Settings

Advanced Table offers a rich set of style configurations, including but not limited to:

• frame: you can set the color, thickness, and choose whether to apply it to the rows only
• Cell Margins: Harmonized or separate
• Font Styles: Support font, font size, color, line height, word weight, word spacing and other controls
• Header Style: Individually configurable font styles, colors, etc. for table headers
• background: Alternating background color for odd and even rows can be set to improve readability
• Background: Support for setting exclusive background colors for individual columns
• your height (honorific): Harmonize the overall table row heights

Advanced Settings

• Outer and inner margins can be set for the entire form block, allowing for easy inter-module white space control.
• You can save the current configuration as the default setting and automatically use the same style when adding future forms.
• Support for adding customizations CSS Class names to accommodate more personalized front-end styling needs

concluding remarks

Advanced Table combination of blocks Kadence Blocks The responsive typography and block nesting capabilities provided by the plugin make it easy to build highly controllable, aesthetically pleasing and functional table structures.

Whether it's showcasing service packages, class schedules, or comparison features,FAQ solution, or with the use of e-commerce modules.Advanced Table All provide enough expressiveness and flexibility to be an integral part of content layout.