Example
Here’s a quick look at all 7 Styled Tables included in the package. The download is later in the message.
Download 7 stylized tables for Divi 5
Get all 7 tables for free. Import them into your Divi library and add them to any page in Visual Builder.
What’s included (8 exports)
Once you download and unzip the file, you will find seven Styled Table exports, plus one file containing all the designs.
Styled Table 1 to 7 (7) → Seven stylized table layouts for comparisons, pricing, and data presentation, with modern typography, clear row structure, and polished heading style.
Styled Tables (all) → Imports all designs to your Divi library at once.
How to use the styled tables
Have your download folder handy. We import a table and add it to a page.
1. Import tables into the Divi library
Go to Divi → Divi Library. Click Import and export at the top of your screen.
In the Import and export layouts modal, switch to the Import tab and then click Choose File and select your JSON.
Choose a Styled Table JSON you want to use and then click Import Divi Builder layouts.
2. Add a formatted table to each page
Open a page in the Visual builder and add a new one Section.
In the Insert section modal, click Add from library and select a Styled Table layout.
Finally, click Use this section.
3. Exchange 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 compares.
Then click directly in the table cells and replace the placeholder labels, attributes, or values. If your table contains a header row, update it first and then work down the rows to keep the structure consistent.
To add or remove rows, duplicate a row module (or the row group used for the table text) and then update the text. For comparisons, you need to keep your columns consistent so that scanning is effortless.
4. Customize styles (optional)
You can easily tailor these tables to your brand by updating typography, colors, borders, spacing, and background treatments.
To change the typography, open a text or heading module and go to the Design tab. Fold the Text dropdown menu to customize Font, font weight, text alignmentAnd Text color. If you use a table title, update the header module to keep the hierarchy clear.
To refine the look of the table, adjust the borders and row spacing. Open the module that controls the table cells (or parent container) and use the Design tab to customize Border width, border color, border radiusAnd Padding.
For zebra stripes or highlighted rows, you need to update the background colors on alternate row modules. This improves readability and makes the table easier to scan.
If the table contains buttons (common in price comparisons), style them in the Design so that the primary plan stands out while the secondary actions remain visible but quieter.
Use Divi’s layout settings to adjust Flex properties like alignment and spacing, especially when fine-tuning how table columns behave on smaller screens.
Tips for effective tables
Tables work best when they are easy to scan and understand. Use these quick wins to keep your tables organized and useful.
Start with clear labels
Your heading row should define what each column represents. Keep labels short and consistent so visitors can quickly compare values.
Use visual hierarchy
Highlight the most important column or map with subtle background contrast, stronger typography or an eye-catching badge. This directs attention without making the table feel crowded.
Keep columns aligned
Match similar types of content the same way. For example, you can align text labels to the left and align short values, such as numbers or check marks, to the center. Consistent alignment improves scanning.
Plan for mobile
On smaller screens, wide tables can feel cramped. Consider stacking the content, reducing the number of columns, or using shorter labels to keep the table readable.
Prioritize readability
Use generous row padding, clear borders, and alternating row backgrounds when necessary. If visitors have to work to read the table, they will skip it.
Start building in Divi 5 today!
These seven style tables let you quickly add polished equations and data sections to pricing pages, feature breakdowns, product specs, and more. Swap out the content, adjust the style, and in minutes you’ll have a clean table layout that suits your site with Divi 5’s Visual Builder.
#Table #Designs #Divi #Free #Download