Table widget

The Table widget lets you organize information into a clear table with customizable columns, rows, colors, typography, borders, and layout styles.

It can be used as a traditional data table or as a comparison table for comparing plans, products, packages, features, or other options side by side.

The widget includes two layouts:

  • Standard
  • Comparison

This article explains how to manage the table content, the difference between the two layouts, and the available styling options.

Table Content

The Table Content settings are where you build the structure and content of your table.

A table consists of:

  • Columns – the vertical sections across the table
  • Rows – the horizontal items displayed underneath the column headings

For example, a pricing comparison might use:

Columns

  • Feature
  • Starter
  • Pro

Rows

  • Team members
  • Storage
  • Priority support

The values for each row can then be entered for the corresponding columns.

Columns

The Columns section controls the columns displayed in the table.

Each column can represent a category, product, plan, option, or other value you want to compare.

Add a column

Click Add column to create another column.

Reorder columns

Use the drag handle to change the order of the columns.

Edit a column

Click the settings icon to edit the column and its content.

Delete a column

Click the trash icon to remove the column.

💡 Tip

Keep the number of columns manageable, especially on mobile devices. Comparison tables are usually easiest to understand when visitors only need to compare a few options at a time.

Rows

The Rows section controls the items displayed vertically in the table.

Each row normally represents one feature, specification, benefit, or other piece of information.

Add a row

Click Add row to create another row.

Reorder rows

Use the drag handle to move rows up or down.

This lets you put the most important information first.

Edit a row

Click the settings icon to edit the row and enter the values displayed across the different columns.

Delete a row

Click the trash icon to remove the row.

Layout

The Layout setting controls the overall presentation of the table.

There are two available options:

  • Standard
  • Comparison

Standard layout

The Standard layout creates a traditional table with a header row followed by your table content.

It works well for:

  • Specifications
  • Feature lists
  • Schedules
  • Structured information
  • Product details
  • Simple plan comparisons

For example:

Use the Standard layout when all columns should have the same visual importance.

Comparison layout

The Comparison layout is designed specifically for comparing different options, such as:

  • Pricing plans
  • Packages
  • Membership levels
  • Service tiers
  • Product versions

It adds additional controls that make it easier to visually emphasize one option and show included or excluded features.

Highlight column

Available when using the Comparison layout.

Select a column that you want to visually emphasize.

For example, if you have:

  • Starter
  • Pro

You could highlight Pro as the recommended option.

The highlighted column receives additional styling so it stands out from the rest of the table.

💡 Tip

Highlight the option you most want visitors to consider rather than highlighting several columns. A single emphasized option creates a clearer decision path.

Feature comparison (auto ✓ / ✕)

Enable Feature comparison to automatically display visual check and cross icons for feature availability.

This is useful for rows where a feature is simply:

  • Included
  • Not included

Instead of displaying text for every cell, the comparison table can show:

  • ✓ for an included feature
  • ✕ for an unavailable feature

This makes larger comparison tables much easier to scan.

Use regular text values for information that requires more detail, such as:

  • 3 users
  • 10 GB
  • Unlimited
  • Weekly
  • Premium support

Highlight label

When a comparison column is highlighted, you can add a short label above the column heading.

For example:

Recommended

Other examples could include:

  • Most popular
  • Best value
  • Premium
  • Our choice

Keep the label short so that it works as a visual cue rather than competing with the actual column heading.

Text Font Family

Controls the font family used throughout the table.

For consistency, it is usually best to use the same font family as the rest of your website.

Font Size

Controls the size of the table text.

Choose a size that keeps the content easy to read without making the table unnecessarily large.

💡 Tip

Tables often contain a lot of information, so readability is more important than fitting as much content as possible into a small space.

Always check the result on both desktop and mobile.

Corner radius

Controls how rounded the outer corners of the table are.

  • Lower values create sharper corners
  • Higher values create a more rounded appearance

Use a value that matches the design style used elsewhere on your website.

Header Background

Controls the background color of the table header.

In the Standard layout, this can be used to visually separate the column headings from the table body.

Choose a color that provides sufficient contrast with the header text.

Header text

Controls the color of the text displayed in the table header.

Make sure the text remains clearly readable against the selected Header Background color.

Body text

Controls the color of the text inside the table rows.

For most tables, a neutral or high-contrast color provides the best readability.

Border / divider

Controls the color of the lines separating:

  • Columns
  • Rows
  • Different areas of the table

Dividers can be subtle or more visible depending on how much separation the content needs.

Striped rows

Controls the alternating background color used for table rows.

Using a subtle striped row color can make larger tables easier to scan horizontally.

This is especially useful when the table contains many rows.

💡 Tip

Keep the contrast between alternating rows subtle. Strong alternating colors can quickly make a table feel visually heavy.

Outer border

Enable Outer border to display a border around the entire table.

Disable it for a more minimal, open appearance.

Whether you use an outer border depends largely on the surrounding page design and how much visual separation the table needs.

Common use cases

The Table widget works particularly well for:

  • Pricing plan comparisons
  • Membership levels
  • Course or program packages
  • Product specifications
  • Service comparisons
  • Feature availability
  • Schedules
  • Structured lists of information

Best practices

  • Keep column headings short and clear
  • Put the most important comparison criteria near the top
  • Avoid adding more columns than visitors can easily compare
  • Use the Comparison layout when users need to choose between options
  • Highlight only the option you want to emphasize most
  • Use ✓ / ✕ for simple included/not-included features
  • Use text when a feature requires additional context
  • Keep colors and typography consistent with the rest of your website
  • Check the table carefully on both desktop and mobile

💡 For pricing comparisons

Visitors should be able to understand the most important differences between your options at a glance. Avoid filling the table with minor details that make the actual decision harder.

Summary

  • The Table widget organizes information into customizable columns and rows
  • Add, remove, edit, and reorder table content as needed
  • Use Standard for traditional tables
  • Use Comparison for side-by-side plan or feature comparisons
  • Highlight a recommended column when appropriate
  • Automatically show ✓ / ✕ for feature comparisons
  • Customize typography, colors, borders, striped rows, and corner radius
  • Keep tables focused and easy to scan

Used correctly, the Table widget makes complex information easier to understand and is especially useful when visitors need to quickly compare different options before making a decision.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.