Divi 5 makes it simple to show data in some way this is blank, scannable, and simple to match. On this unfastened pack, you’ll in finding 7 Styled Tables, designed for pricing comparisons, characteristic lists, schedules, specifications, and different data-heavy content material. Drop one onto any web page, change the textual content, and you’re ready to move. No additional setup required.

Preview

Right here’s a handy guide a rough take a look at all 7 Styled Tables integrated within the pack. The obtain is additional down the publish.

Obtain 7 Styled Tables For Divi 5

Get all 7 tables free of charge. Import them into your Divi Library and upload them to any web page within the Visible Builder.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:ahead of { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@media best display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 robust { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

See also  Finding out JavaScript: Issues to Know Earlier than You Get started

Obtain For Loose

Sign up for the Divi E-newsletter and we can e-mail you a replica of without equal Divi Touchdown Web page Format Pack, plus lots of different wonderful and unfastened Divi sources, pointers and tips. Apply alongside and you’ll be a Divi grasp very quickly. In case you are already subscribed merely sort on your e-mail cope with beneath and click on obtain to get admission to the format pack.

DOWNLOAD

You’ve got effectively subscribed. Please take a look at your e-mail cope with to verify your subscription and get get admission to to unfastened weekly Divi format packs!

What’s Integrated (8 Exports)

After you obtain and unzip the report, you’ll in finding 7 Styled Desk exports, plus 1 report containing all designs.

Styled Desk 1 to 7 (7) → Seven styled desk layouts for comparisons, pricing, and knowledge presentation, that includes trendy typography, transparent row construction, and polished header styling.
Styled Tables (All) → Imports all designs in your Divi Library without delay.

How To Use The Styled Tables

Stay your obtain folder to hand. We’ll import, then upload a desk to a web page.

1. Import Tables Into The Divi Library

Move to Divi → Divi Library. Click on Import & Export on the peak of your display.

Within the Import & Export Layouts modal, transfer to the Import tab, then click on Select Record and choose your JSON.

Select any Styled Desk JSON you wish to have to make use of, then click on Import Divi Builder Layouts.

2. Upload A Styled Desk To Any Web page

Open a web page within the Visible Builder and upload a brand new Segment.

Within the Insert Segment modal, click on Upload From Library and choose a Styled Desk format.

In the end, click on Use This Segment.

3. Change The Content material

As soon as the desk is at the web page, changing the placeholder content material takes only a few clicks. Get started via updating the identify and supporting textual content so guests perceive what the desk is evaluating.

Subsequent, click on at once into the desk cells and change the placeholder labels, options, or values. In case your desk features a header row, replace the ones first, then paintings your manner down the rows to stay the construction constant.

If you wish to upload or take away rows, reproduction a row module (or the row staff used for the desk frame), then replace the textual content. For comparisons, stay your columns constant so scanning remains easy.

4. Modify Types (Not obligatory)

You’ll be able to simply fit those tables in your emblem via updating typography, colours, borders, spacing, and background remedies.

To modify typography, open any Textual content or Heading Module and cross to the Design tab. Enlarge the Textual content dropdown menu to regulate Font, Font Weight, Textual content Alignment, and Textual content Colour. When you use a Desk Name, replace the Heading Module to stay hierarchy transparent.

To refine the desk glance, regulate borders and row spacing. Open the module controlling the desk cells (or the father or mother container) and use the Design tab to tweak Border Width, Border Colour, Border Radius, and Padding.

For zebra striping or highlighted rows, replace background colours on alternating row modules. This improves clarity and makes the desk more straightforward to scan.

If the desk contains buttons (not unusual in pricing comparisons), taste them within the Design tab so the main plan sticks out whilst the secondary movements keep visual however quieter.

Use Divi’s format settings to regulate Flex houses, comparable to alignment and spacing, in particular when refining how desk columns behave on smaller displays.

Pointers For Efficient Tables

Tables paintings highest when they’re simple to scan and simple to grasp. Use those fast wins to stay your tables transparent and helpful.

Get started With Transparent Labels

Your header row must outline what every column represents. Stay labels quick and constant so guests can examine values temporarily.

Use Visible Hierarchy

Spotlight an important column or plan with refined background distinction, more potent typography, or a callout badge. This guides consideration with out making the desk really feel busy.

Stay Columns Aligned

Align equivalent varieties of content material the similar manner. As an example, left-align textual content labels, and center-align quick values like numbers or checkmarks. Constant alignment improves scanning.

Plan For Cellular

On smaller displays, huge tables can really feel cramped. Imagine stacking content material, decreasing the collection of columns, or the use of shorter labels so the desk stays readable.

Prioritize Clarity

Use beneficiant row padding, transparent borders, and alternating row backgrounds when wanted. If guests need to paintings to learn the desk, they are going to skip it.

Get started Construction In Divi 5 As of late!

Those 7 Styled Tables come up with a quick manner so as to add polished comparisons and knowledge sections to pricing pages, characteristic breakdowns, product specifications, and extra. Change the content material, regulate the styling, and you’ll have a blank desk format that matches your web site in mins with Divi 5‘s Visible Builder.

The publish 7 Table Designs For Divi 5 (Free Download!) gave the impression first on Elegant Themes Blog.

read more