Dynamic Table
Pricing tables, feature charts, team directories – data is the backbone of good decisions. But a default HTML table screams “spreadsheet,” not “solution.” Master Addons Dynamic Table Element turns structured information into a designed experience. Build any table from scratch directly in the Elementor editor. Define your headers, fill the body with text, images, icons, or even dynamic content from your posts. Then, apply professional styling at every level: the header, each row, individual cells. Create clarity, highlight what matters, and make your data something people actually want to read.
Visual Drag & Drop Table Builder
Forget complex shortcodes. Build your table’s entire structure in an intuitive visual interface. Start by defining your Table Head columns (like “Feature,” “Price,” “Plan”). Then, add and manage rows in the Table Body just like a spreadsheet. Need another row? Click Add Item. Want to merge cells? Use Column Span and Row Span controls for complex layouts. You see your table forming in real-time as you build it, making the process fast, accurate, and entirely visual.
- Intuitive Header Setup: Add and label header columns directly in the editor to define your table’s structure.
- Live Row Management: Add, delete, and reorder body rows on the fly with the Add Item button.
- Cell Merging Power: Create header groups or highlight key cells using Column Span and Row Span options.
Separate Header & Body Styling Control
A great table guides the eye. Make your header row stand out as the clear guide for the data below. Style the Table Header completely independently. Give it a bold Background Color, distinct Text Color, and strong Typography. Adjust the Inner Cell Padding to make it spacious and easy to read. This creates immediate visual hierarchy, helping users scan and understand your data in seconds. The body rows get their own, separate set of styling controls for perfect contrast.
- Independent Header Styling: Apply unique Background Color, Text Color, and Typography to the header row only.
- Cell Padding Control: Set custom Inner Cell Padding for header cells to improve legibility and design.
- Body-Specific Styling: Style the table body rows with their own background, text color, and alignment.
Cell Content: Text, Icons, Image & Dynamic Data
Each cell can tell a richer story. Beyond simple text, insert Images or choose Icons from the library to create visual feature checkmarks (✓) or status indicators. Most powerfully, connect your table to live site content using Dynamic Tags. Automatically pull in data like Post Titles, Custom Fields, ACF values, or user information. Create a product comparison table, a staff directory, or an event schedule that updates automatically – truly dynamic.
- Multi-Format Content: Choose Text, Image, or Icon for any body cell.
- Icon Customization: Style icons with their own Size, Color, and Padding within the cell.
- Dynamic Tags Integration: Populate cells automatically using dynamic data sources (e.g., post meta, author name, custom fields).
- Flexible Alignment: Control Horizontal and Vertical Alignment of content within each cell for a polished layout.
Global Table Styling & Professional Effects
Tie the whole table together with global design settings. Enable Striped Table rows for a classic, easy-to-scan look and choose the alternating row color. Control the overall Border Type, Width, and Color for the entire table grid. Set universal Inner Cell Padding for consistent spacing. Add a Background Type (color, gradient) to the entire table container. These global touches ensure your table looks like a cohesive, purpose-built element, not a collection of individual cells.
- Zebra Striping: Turn on Striped Table and pick a color for alternating rows to dramatically improve readability.
- Border Styling: Define the Border Type, thickness, and color for the entire table’s gridlines.
- Container Design: Add a Background and control the overall table’s Padding and Margin.
- Consistent Spacing: Apply global Inner Cell Padding to ensure uniform, comfortable spacing in all cells.
Frequently Asked Questions For Dynamic Table
Can I connect this table to my custom post types or Advanced Custom Fields (ACF)?
Yes, you can! Through the Dynamic Tags feature available in the body cell content selector. When editing a cell, click the database icon to open the dynamic tags panel. You can then select from sources like “Post Title,” “Custom Fields,” “ACF Field,” and more to populate the table with live data from your posts, products, or any custom post type.
Is the table responsive on mobile devices?
Absolutely. The table is designed to be responsive. On very small screens, you may want to enable a horizontal scroll container in Elementor or simplify the number of columns. The styling (padding, font sizes) will adapt, and you can adjust settings specifically for mobile view using Elementor’s responsive editing mode.
Can I create a pricing table with a "highlighted" column using this element?
Definitely. You would create a column for each pricing tier. To highlight one column (like the “Popular” plan), you can use the Column Span feature in a header cell for a badge, and then apply a different Background Color to all the cells in that specific column by adding a custom CSS class or using individual cell styling options if available in advanced settings.
What happens if I add a very long text in a cell?
You control the behavior. You can set a Custom Width for the column to control expansion. The text will wrap within the cell based on your Typography and Padding settings. For long content, ensure you have adequate row height (controlled by vertical padding) to maintain readability.
How does this compare to just using an HTML widget or a table plugin?
This element gives you visual design control within Elementor. Unlike a basic HTML widget, you don’t need to write any code to style borders, colors, or alignment. Compared to many table plugins, it integrates seamlessly with Elementor’s workflow and styling system, offering a more unified and efficient design experience without bloating your site with another standalone plugin.
Can I sort or filter the table data dynamically?
This element is primarily for static or dynamically-populated display tables. It does not include built-in front-end sorting, filtering, or search functions like a data table plugin would. For those advanced interactive features, you would need a dedicated solution. This element is perfect for presenting fixed information like pricing, specs, or schedules in a beautifully designed format.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
