Divi 5 makes it easy to display information in a way that is clean, scannable, and easy to compare. In this free pack, you will find 7 Styled Tables, designed for pricing comparisons, feature lists, schedules, specs, and other data-heavy content. Drop one onto any page, swap the text, and you are ready to go. No extra setup required.
Preview
Here’s a quick look at all 7 Styled Tables included in the pack. The download is further down the post.
Download 7 Styled Tables For Divi 5
Get all 7 tables for free. Import them into your Divi Library and add them to any page in the Visual Builder.
What’s Included (8 Exports)
After you download and unzip the file, you’ll find 7 Styled Table exports, plus 1 file containing all designs.
Styled Table 1 to 7 (7) → Seven styled table layouts for comparisons, pricing, and data presentation, featuring modern typography, clear row structure, and polished header styling.
Styled Tables (All) → Imports all designs to your Divi Library at once.
How To Use The Styled Tables
Keep your download folder handy. We’ll import, then add a table to a page.
1. Import Tables Into The Divi Library
Go to Divi → Divi Library. Click Import & Export at the top of your screen.
In the Import & Export Layouts modal, switch to the Import tab, then click Choose File and select your JSON.
Choose any Styled Table JSON you want to use, then click Import Divi Builder Layouts.
2. Add A Styled Table To Any Page
Open a page in the Visual Builder and add a new Section.
In the Insert Section modal, click Add From Library and select a Styled Table layout.
Finally, click Use This Section.
3. Swap The Content
Once the table is on the page, replacing the placeholder content takes just a few clicks. Start by updating the title and supporting text so visitors understand what the table is comparing.
Next, click directly into the table cells and replace the placeholder labels, features, or values. If your table includes a header row, update those first, then work your way down the rows to keep the structure consistent.
If you want to add or remove rows, duplicate a row module (or the row group used for the table body), then update the text. For comparisons, keep your columns consistent so scanning stays effortless.
4. Adjust Styles (Optional)
You can easily match these tables to your brand by updating typography, colors, borders, spacing, and background treatments.
To change typography, open any Text or Heading Module and go to the Design tab. Expand the Text dropdown menu to adjust Font, Font Weight, Text Alignment, and Text Color. If you use a Table Title, update the Heading Module to keep hierarchy clear.
To refine the table look, adjust borders and row spacing. Open the module controlling the table cells (or the parent container) and use the Design tab to tweak Border Width, Border Color, Border Radius, and Padding.
For zebra striping or highlighted rows, update background colors on alternating row modules. This improves readability and makes the table easier to scan.
If the table includes buttons (common in pricing comparisons), style them in the Design tab so the primary plan stands out while the secondary actions stay visible but quieter.
Use Divi’s layout settings to adjust Flex properties, such as alignment and spacing, particularly when refining how table columns behave on smaller screens.
Tips For Effective Tables
Tables work best when they are easy to scan and easy to understand. Use these quick wins to keep your tables clear and useful.
Start With Clear Labels
Your header row should define what each column represents. Keep labels short and consistent so visitors can compare values quickly.
Use Visual Hierarchy
Highlight the most important column or plan with subtle background contrast, stronger typography, or a callout badge. This guides attention without making the table feel busy.
Keep Columns Aligned
Align similar types of content the same way. For example, left-align text labels, and center-align short values like numbers or checkmarks. Consistent alignment improves scanning.
Plan For Mobile
On smaller screens, wide tables can feel cramped. Consider stacking content, reducing the number of columns, or using shorter labels so the table remains readable.
Prioritize Readability
Use generous row padding, clear borders, and alternating row backgrounds when needed. If visitors have to work to read the table, they will skip it.
Start Building In Divi 5 Today!
These 7 Styled Tables give you a fast way to add polished comparisons and data sections to pricing pages, feature breakdowns, product specs, and more. Swap the content, adjust the styling, and you will have a clean table layout that fits your site in minutes with Divi 5‘s Visual Builder.
Leave A Reply