If you're wondering how to make a table in Elementor, this guide walks you through different methods to add and customize tables inside WordPress using the Elementor builder. Tables are useful for organizing content such as product features, pricing, schedules, or comparison data.
Using the Elementor Table Widget
The easiest way to create a table in Elementor is by using a dedicated table widget. Elementor Pro doesn't come with a built-in table element, but many third-party add-ons offer this functionality. These widgets let you add rows and columns visually, customize layouts, and even include media or buttons inside cells.
Popular add-ons with table widgets:
- Elementor Essential Addons
- Premium Addons for Elementor
- Happy Addons
Using HTML to Create Tables in Elementor
If you are using the free version of Elementor, you can add tables using the HTML widget. This method offers full control over the structure and content, though it requires some basic knowledge of HTML.
Steps to insert an HTML table:
- Drag the HTML widget into your section
- Paste your table code (e.g.,
<table>...</table>) - Customize rows and columns as needed
- Optionally add inline CSS for styling
How to Make a Responsive Table in Elementor
To make tables mobile-friendly, you should ensure they adapt to different screen sizes. This is especially crucial if you display data in Elementor table formats. Responsive tables maintain usability and readability on all devices.
- Use plugins with responsive features
- Wrap tables in scrollable containers (CSS)
- Stack columns vertically using CSS media queries
- Test on tablets and phones to ensure legibility
Create Pricing Tables in Elementor
Pricing tables are a common use-case. Elementor Pro includes a "Price Table" widget, or you can use third-party options for more styles. Pricing tables help customers compare packages or plans, which is critical for sales pages.
Options to create pricing tables:
- Elementor Pro's native widget
- JetElements price table
- Premium Addons pricing block
- Happy Addons price widgets with ribbons and badges
Customize Tables in Elementor
After inserting your table, you can style it using Elementor's design tools or additional CSS. Visual consistency and clear hierarchy help users understand the information better.
Typography and Colors. Change fonts, row colors, and borders using style settings.
Spacing. Adjust padding and margin to fit your design.
Hover Effects. Add interactive touches using motion effects.
Borders and Shadows. Use subtle styles to separate content clearly without clutter.
Best Table Plugins for Elementor
If you want more control or complex layouts, try these popular table plugins. They integrate well with Elementor and often support responsive and dynamic content.
| Plugin | Features |
|---|---|
| TablePress | Advanced editing, shortcode support, import/export |
| WP Table Builder | Drag-and-drop interface, responsive design, media support |
| JetElements | Integrated with Elementor, multiple design presets |
Advanced Tables in WordPress Elementor
If your website requires interactive or sortable tables, use JavaScript-based plugins or embed Google Sheets with HTML. This approach is ideal for large datasets or when you need automatic data updates.
- Enable sorting and filtering options
- Import tables via CSV or Google Sheets
- Use DataTables jQuery for large datasets
- Include charts or visual elements alongside data
Elementor Free vs Pro Table Options
Understanding the difference between free and paid features helps you choose the right tools. The free version offers basic tools, while Pro and third-party plugins open up a wider range of capabilities.
| Feature | Elementor Free | Elementor Pro |
|---|---|---|
| Basic table via HTML | Yes | Yes |
| Built-in price table | No | Yes |
| Third-party widget support | Yes | Yes |
| Styling without code | Limited | Extensive |
Useful Links
HTML Widget – Elementor – Learn how to use the HTML widget in Elementor to add custom HTML code, including tables, to your pages.
Price Table Widget – Elementor – Discover how to utilize the Price Table widget in Elementor Pro to create attractive pricing tables.
Custom CSS in Elementor – Understand how to add custom CSS to your Elementor designs for enhanced table styling and responsiveness.
Responsive Editing – Elementor – Explore how to make your tables and other elements responsive across different devices using Elementor's responsive editing tools.
How to Create Tables in WordPress With Elementor & TablePress – A comprehensive guide on integrating TablePress with Elementor to create advanced tables.
90+ Top widgets to Achieve Your Goals with Elementor!
Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!
Conclusion
Now you know how to create a table in WordPress Elementor using multiple methods—from HTML to plugins and custom widgets. Whether you want to add a pricing table or display complex data, Elementor offers the tools and flexibility to build responsive, attractive layouts. Try a few methods and choose the one that best fits your needs and design preferences.
