TableMaster is a powerful table builder plugin for Elementor that helps you create responsive, feature-rich tables without writing any code. From simple pricing tables and large datasets to tables that automatically update from external sources, TableMaster provides an easy solution.
TableMaster is available in both Free and Pro versions and includes three table elements:
- Content Table: Best for creating simple tables with custom content and a smaller amount of data.
- Data Table: Ideal for displaying large datasets with advanced table functionality.
- Dynamic Table: Perfect for displaying dynamic data from sources such as Google Sheets and keeping your tables automatically updated.
All three elements are beginner-friendly and designed to work seamlessly within Elementor's familiar editing interface.
In this guide, we'll walk you through creating your first table using the Content Table element.
Create a Table in TableMaster#
Before You Begin#
Make sure the following plugins are installed and activated on your website:
1: Enable the Content Table Element#
After activating both plugins:
From your WordPress Dashboard, navigate to Elementor >> Editor >> TableMaster.
This will open the TableMaster settings page. Click the Elements tab.
- Enable the Content Table and other table elements.
- Click Save Changes.
Step 2: Add the Content Table Element to Your Page#
- Create a new page or edit an existing page with Elementor.
- In the Elementor widgets panel, search for the "Content Table".
- Look for the widget with the TME badge.
- Drag and drop the widget onto your page.
Once added, you'll see two main tabs in the Elementor panel:
- Content
- Style
Let's start by exploring the Content tab.
Content Tab#
Content tab contains several sections that allow you to build and customize your table.
General#
General section contains basic table settings.
- Table Layout: Choose how your table columns should behave.
Auto
- Column widths are automatically calculated based on the content inside each cell.
- Useful when column content varies in length.
Fixed
- Columns maintain fixed widths regardless of content length.
- Helps create a more consistent table structure.
Responsive Mode#
Choose how the table behaves on smaller screens.
- None: No responsive behavior is applied.
- Stack: Table rows stack vertically for better readability on mobile devices.
- Scroll: Adds horizontal scrolling, allowing users to scroll through the table on smaller screens.
Header#
The Header section allows you to create and manage table columns. By default, you'll find three pre-created header columns:
- Header Column #1
- Header Column #2
- Header Column #3
You can:
- Add new header columns.
- Delete existing columns
- Duplicate columns
- Reorder columns as needed
Header Column Settings
Click on any header column to access its settings.
- Text: Enter the column heading text that will appear at the top of the table.
- Tooltip: Add additional information that appears when users hover over the header.
- Style: Choose the visual style for the header content.
- Icon Type: You can also display visual elements alongside your header text. Available options include: None, Icon, or Image.
Body#
Body section is where you'll add and manage the actual table content. This section allows you to create rows and populate cells with your desired content.
Detailed settings for the Body section are covered below.
- Body: Body section is where you add and manage the actual content of your table. Here, you can create table rows and populate each column with the content you want to display.
By default, the number of cells available in each row matches the number of header columns you have created.
Adding Rows and Cells
Body section uses a repeater-based interface that makes it easy to build table structures. You'll see two types of items:
- Table Row: Represents an entire row in the table.
- Table Cell: Represents an individual cell within that row.
When you click the Add Item button, you can choose between:
- Row: Creates a new table row.
- Cell: Adds a new cell inside the selected row.
You can also:
- Duplicate rows and cells using the duplicate icon.
- Remove rows and cells using the delete icon.
- Reorder rows and cells by dragging and dropping them into the desired position.
Note: Make sure the number of cells in each row matches the number of header columns for proper table alignment.
Table Cell Settings#
Click on any table cell to open its settings panel.
- Label: Helps you identify the cell within the editor. This label is only visible in the Elementor editor and does not appear on the frontend.
Content Sub- Tab
Content Sub-tab lets you add and customize the content displayed in the cell.
- Content Type: Choose the type of content you want to display inside the cell. Currently, the Default content type allows you to add custom content using the editor.
- Text: Enter the content you want to display in the table cell. The editor supports:
- Text formatting
- Bold, italic, and underline styles
- Lists
- Links
- Media insertion
- Custom HTML (Code view)
Tooltip Sub-Tab
Use this tab to add additional information that appears when users hover over the cell content. Tooltips are useful for:
- Explaining technical terms
- Providing extra details
- Displaying supplementary information without cluttering the table
Style Sub-Tab
Style tab lets you customize the appearance of individual table cells. You can use these settings to highlight specific cells and create more visually appealing tables.
Other Additional Options
- Icon: You can optionally display an icon or image inside the table cell. Available options include: None, Icon or Image.
- Button: You can also add a button inside a table cell.
- Show Button: Enable this option to display a button within the selected cell.
- Link: Use the Link field to make the cell content, icon, image, or button clickable.
Rating#
Note: The Rating section is available in the Pro version of TableMaster.
Rating section lets you define the rating system used in your table. This feature is particularly useful for: Product comparison tables, Review tables, Feature scoring tables, Service comparison tables etc.
- Rating Scale: Use the Rating Scale slider to define the maximum rating value.
- Icon: Choose the icon that will represent the rating value.
Sticky Header#
Sticky Header feature keeps your table header visible while visitors scroll through the table.
This is especially useful for large tables with multiple rows, as users can always see the column headings without scrolling back to the top.
- Sticky Header: Enable this option to keep the table header at the top of the page as you scroll.
- Header Offset (px): Use this option to define the distance between the sticky header and the top of the browser window.
Tooltip#
Tooltip section allows you to customize how tooltips behave and appear throughout your table.
- Enable Tooltip: Turn this option on to activate tooltip functionality for your table.
- Trigger: Choose how tooltips should be displayed.
- Display On: Choose where tooltips should appear.
- Size: Select the tooltip size.
- Position: Choose the tooltip placement relative to the element.
- Show Arrow: Enable or disable the tooltip arrow indicator.
- Animation: Select an animation effect for displaying tooltips.
- Distance: Controls the spacing between the tooltip and the triggering element. Increasing this value moves the tooltip further away from the text or icon.
- Z-Index: Defines the tooltip's stacking order. If the tooltip appears behind other elements on your page, increase the Z-Index value.
Settings#
Settings section provides advanced table functionality such as sorting, searching, and pagination.
- Advanced Options: Enable this option to access advanced table features.
- Sortable Table: Enable this option to allow users to sort table data by clicking column headers.
- Show Table Info: Displays table information such as the number of entries currently being shown.
- Search Form: Search Form feature allows visitors to quickly find information within the table.
- Show Search Form: Enable this option to display a search field above the table. Visitors can type keywords to instantly filter table content.
- Search Form Label: Customize the text displayed next to the search field.
- Pagination: Pagination helps improve usability by dividing large tables into multiple pages.
- Show Pagination: Enable this option to display pagination controls below the table.
- Page Limit: Specify how many table rows should appear on each page.
- Show Length Change: Enable this option to display an Entries Per Page dropdown above the table.
After configuring all settings, switch to the Style tab to customize your table's appearance, including typography, colors, spacing, borders, header and row styling, tooltip design, and other visual elements.
Style Tab#
After building your table, switch to the Style tab to customize its appearance and match your website's design.
Style tab includes the following sections:
- Table
- Header
- Rows
- Cells
- Icon
- Button
Let's take a quick look at some of the key styling sections.
Table#
This section controls the overall appearance of your table. Available options include:
- Width: Adjust table width according to your layout requirements.
- Alignment: Align the table to the left, center, or right within its container.
- Background Type: Add a solid color or gradient background to the table.
- Border Type: Apply borders around the table and customize their appearance.
- Box Shadow: Add shadow effects to make the table stand out from surrounding content.
- Border Collapse: Choose how table borders should behave when cells are placed next to each other.
Header#
Header section allows you to style column headings. Available options include:
- Typography
- Text Color
- Sortable Icon Color
- Background Color
- Border Type
- Horizontal Alignment
- Vertical Alignment
- Padding
You can also configure separate styles for: Normal & Hover states.
Rows#
Rows section controls styling for table rows.
- Alternate Rows: Enable alternating row colors to improve readability, especially in large tables.
- For Normal & Hover States: Customize Text & Background
Cells#
Cells section lets you customize individual table cell styling. Available options include:
- Typography
- Text Color
- Background Color
- Border Type
- Horizontal Alignment
- Vertical Alignment
- Padding
Icon#
Icon section controls the styling of icons and images used in table cells. Available options include:
- Icon Settings: Color, Size and Spacing
- Image Settings: Size and Border Radius
Button#
Button section allows you to customize the buttons displayed inside table cells. Available options include:
- Typography
- Text Color
- Background Color
- Border Type
- Border Radius
- Padding
- Box Shadow
Separate styling controls are available for Normal and Hover states, allowing you to create attractive call-to-action buttons within your table.
Note: All customization & styling options follow Elementor's standard styling interface and are easy to use. We've attached screenshots of all available settings for reference.
If you have any questions or find any option confusing, feel free to leave a comment below or reach out to our support team. We're always happy to help.
Wrapping Up!#
Creating your first table with TableMaster is quick and straightforward. Simply enable the desired table element, add it to your Elementor page, configure columns and rows, and customize settings to match your needs.
For simple custom tables, Content Table provides everything needed to build responsive and visually appealing tables without writing code.
As your requirements grow, you can also explore Data Table and Dynamic Table elements to create advanced tables and display automatically updated data.
Once your table is ready, click Publish or Update to publish it to your website.