Divi Plugin Highlight: Table Maker

Posted on September 10, 2020 by in Divi Resources | 11 comments

Divi Plugin Highlight: Table Maker

Although Divi has a lot of modules, it doesn’t have a module to build tables. Fortunately, there is a solution. Table Maker is a third-party plugin that allows you to build fully customizable tables with the Divi Builder. To help you decide if this is the right plugin for your Divi website, in this article, we’ll take a look at Table Maker and see what it can do.

Installing Table Maker

Installing Table Maker

Installation is simple and straightforward.

  1. Navigate to Plugins > Add New > Upload Plugin
  2. Click Choose File
  3. Locate the plugin’s zip file on your computer and select it
  4. Click Install Now
  5. Click Activate

Table Maker Module

Table Maker Module

A new module is added to the Divi Builder called Table Maker. Let’s look at the main features.

Table Maker Content Tab

Table Maker Content Tab

The Content tab includes an area for submodules. These are used to create the columns for the table. For the columns, you can adjust the header and footer count, and size for the columns and rows, adjust the responsive breakpoints for each device-type, enable scrolling, and choose icons, buttons, and images. The icons, buttons, and images have customizations for size, color, placement, etc.

Column Submodules

Column Submodules

The submodules define the columns and include a field to add content to the rows. It works much like a code editor where each row is numbered. You can also adjust the width, icons, buttons, and images.

The first line is the title of the column by default, but you can change this if you don’t want to have a header. You can include HTML, which means you’ll need to avoid certain characters that are used for markup. You can also add CSS, shortcodes, iFrames, icons, images, buttons, and more.

Column Submodules

The columns include design customizations for every element including the text, background, cells, header and footer cells, etc.

Column Submodules

Create as many columns as you want. You can style them independently, extend styles from one to the others, etc. I’ve added 4 columns and adjusted the colors and widths of each column separately.

Headers and Footers

Headers and Footers

You can set the number of columns for headers and footers. By default, it has 1 header and no footer. In this example, I’ve set the first 2 as headers and the last one as a footer. The colors are styled independently.

Headers and Footers

You can do the same for rows. In this example, I’ve set 2 rows as headers (the two on the left) and one as a footer (the one on the right).

Table Scrolling

Table Scrolling

Table Scrolling provides both horizontal and vertical scrolling. You can make the column and row headers sticky if you want. This keeps them in place so they don’t scroll out of view. In this example, I’ve enabled scrolling and made the headers sticky. I’ve added lots of columns so it can scroll vertically. The row headers remain in place.

Table Icons

Table Icons

You can add as many icons as you want to each cell. Set up a default icon and choose icons for each cell separately. Choose the default icon and adjust the size and color from the Content tab.

Table Icons

The icons are added to the specific cells you want them to display in by using the icon tag in the content area of the submodules. You can override the default icon and set a default for this column by selecting it from the icon tab in the submodule, and you can enter the name of any specific icon you want it to display. The sales page in the Elegant Themes Marketplace provides a link to the list of icons and their names.

Table Buttons

Table Buttons

Table buttons are also added using tags. Add a default button in the Content tab. You can also style the button from these settings. Override the default button with these same settings within each column submodule.

Table Buttons

Add the button to each cell with the button tag in the content area of the submodule. Change the text on the button by adding it within the tags. In this example, I’ve added the default button a couple of cells and changed the text for the second button.

Table Images

Table Images

You can add images, icons, and other types of content to the cells. Set the image quality, proportion, scale, and horizontal and vertical alignment. It has a lot of options for images.

Table Images

Even though the images are added in the gallery, they don’t display until you tell them which cell to display in. This is done using tags. By typing the opening image tag, the closing tag is automatically added and the image displays within that cell. You can include it with other content in the cells. Add a number between the tags to specify a specific image to display.

Table Maker Design Tab

The Design tab includes settings for the table frame, stripes, cells, text, header, footer, sizing, spacing, border, etc. Here are the main settings.

Table Frame

Table Frame

The design tab includes customizations for the table frame, cells, text, header, row, footer, sizing, spacing, border, etc. This is the table frame. The default frame type uses Gaps, which places a little bit of space between the cells. This is None, which removes the borders between the cells.

Table Frame

For Gaps, you can adjust the column and row gaps independently. I’ve increased the column gap to 8px and row gap to 4px.

Table Frame

Lines places a border around each cell. You have control over the style, color, and thickness of the lines. This is the default.

Table Frame

In this example, I’ve set the style to dotted, changed the color, and adjusted the line-width to 3px.

Table Stripes

Table Stripes

Table Stripes creates a stripe effect like a standard spreadsheet. You can choose where it applies to, choose the order, and adjust the hue, saturation, and brightness. These are the default settings.

Table Stripes

For this example, I’ve adjusted the stripe hue to 86deg, saturation to 172%, and brightness to 82%. All three adjustments work together to create interesting color options.

Table Stripes

For this example, I’ve adjusted the color of the table cells, header cells, and column header cells.

Table Stripes

For this example, I’ve added a #1 box shadow to the header cells and a #3 box shadow to the row header cells. I’ve centered horizontal and vertical alignment of the text for each of the cell-types individually. I’ve also added more space for the gaps.

Header and Footer Styling

Header and Footer Styling

You can style the colors for the header and footer text and cells independently. In this example, I’ve added a footer, made the text white and in all-caps, set the cell color to dark blue, and added a box shadow to the cells.

Header and Footer Styling

In this example, I’ve independently adjusted the borders for the cells, header cells, and footer cells.

Table Maker Examples

Table Maker Examples

I created a table with 5 columns, a column header, and a row header. The row header has a shopping button that takes you to the product page for each product, and a product image. Both headers use a black background, rounded corners, and fonts from the layout.

The cells use stripes, a larger font from the layout, and rounded corners. The last column displays icons to show if a product is in stock. I added a box shadow to each of the headers and cells. The table frame uses gaps with 4 pixels for the column gap and 7 pixels for the row gap.

Table Maker Examples

Here’s the same design without the images in the row header.

Table Maker Examples

Here’s the layout with the product images as it appears on mobile. It reduces the table to 2 columns with one being the row header. This one breaks it by columns.

Table Maker Examples

You can also have it to break by rows. This example removes the images and shows the table broken by rows.

Table Maker Examples

This one shows the rows as an accordion. Clicking one opens it to show its content.

Where to Buy Table Maker

You can purchase Table Maker in the Divi Marketplace. It costs $35 for unlimited websites and includes a 30-day money-back guarantee and one year of support and updates. Documentation is provided as video walkthroughs and text.

Ending Thoughts

That’s our look at Table Maker for Divi. It has a lot of features to build and customize tables for Divi including several that I didn’t cover here. I only needed the documentation to see how to use images, icons, and buttons.

At first, it seemed a little awkward to add buttons, icons, and images to the table using tags, but it’s easy to do and since the content for the cells is added with a code editor it gives you a lot more control than you’d normally have.

Table Maker is an excellent plugin for creating tables with Divi. Being able to add content such as HTML, shortcodes, iFrames, CSS, etc., greatly enhances the types of tables you can create. If you’re interested in building your own custom tables with Divi, Table Maker is worth a look.

We want to hear from you. Have you tried Table Maker for Divi? Let us know what you think about it in the comments.

Featured Image via PCH.Vector / shutterstock.com

Looking For More Great Divi Extensions? Check These Out!

Divi Carousel Module 2.0

Robust and extremely customizable carousel module for divi.

View Product

320 Sales

Divi Supreme Pro

With 40+ Divi premium modules and extensions to choose from. Take ...

View Product

322 Sales

Divi Events Calendar

Easily display and style the The Events Calendar feed with custom ...

View Product

229 Sales

Table Maker

Brings beautiful responsive tables to the Divi Builder.

View Product

164 Sales

Divi Blog Extras

A powerful & highly customizable Divi blog layout plugin with ...

View Product

156 Sales

Divi Plus

A power-packed multipurpose plugin enclosed with multiple ...

View Product

123 Sales

Divi Modal Popup

Divi Modal Popup plugin allows you to create popups & lightboxes for ...

View Product

102 Sales

Divi Essential

All in one set of 40+ design modules with 500+ layouts for all Divi ...

View Product

37 Sales

Premade Layouts

Check Out These Related Posts

Get a FREE Tarot Layout Pack for Divi

Get a FREE Tarot Layout Pack for Divi

Posted on September 21, 2020 by in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand new, free Divi Layout Packs from our design team to you. This time around, Kenny and his team have created a beautiful Tarot Layout Pack that’ll help you...

View Full Post

11 Comments

  1. Hello, I may be asking too much, but is there a way to upload/connect an excel file that populates the custom table I create in Divi?

    • Hi Stanford. This is David, the maker of Table Maker. No, Table Maker doesn’t have the ability to import data, either by file or dynamic content. It was always my intention for Table Maker to be more of a display table rather than a data-driven table. This is partly because Divi just doesn’t have appropriate interface elements to allow for building such a complex module but also because there are already excellent exisiting plugins out there for doing such things… see Chuck Hersey’s comment below. Kind regards, David.

  2. Table Maker looks like a winner. I’ve used TablePress in the past but it doesn’t have the features of Table Maker. The ability to use TP inside the Divi Builder should make this a go-to for Divi tables! Can’t wait for a project to try it on.

    • There is no comparison to TablePress. TablePress provides full function spreadsheet /interactive data deliverables, that you can use on your website including data functions. TableMaker is a DIVI plugin specifically for HTML tables i.e. not comparable. There is no data function. Also you cannot deliver data (interactive data) just flat tables. In other words it is strictly design and tables is used specifically in the HTML sense, not in the larger sense that includes both design/style and data. To say TableMaker doesn’t have the features of TablePress may in some way be true (for example it is not a divi plugin) but is a gross misrepresentation. TablePress is a feature packed tool based upon very mature code (that exists outside of the WordPress universe) that has outstanding capabilities to deliver interactive data to websites. If all you want is a way to setup table layouts in your divi pages, TableMaker may be better for you. I just wanted to address the disregard for TablePress which in my opinion is a great tool. I have no stake in TablePress other than having used it.

      • Hi Paul. This is David, the maker of Table Maker. Good on you for defending TablePress. 🙂 As you rightly point out, TablePress has many features that Table Maker does not, and it was never my intention to try to complete with it. As I mentioned to Stanford above, my intention for Table Maker was for it to be more of a display table, rather than a data-driven table. Table Maker focuses on providing as many styling options as is reasonable and providing the ability for Divi users to build tables directly within the Visual Builder, something that Divi lacks, until now. Kind regards, David.

      • Paul,

        I don’t disagree with your comments. Just to clarify, when I said TablePress doesn’t have the features of Table Maker I was referring to the ability to use Table Maker in the Divi Builder. I should have been more clear in my comments. Certainly didn’t mean to disregard TablePress which is a wonderful plugin.

        Chuck

  3. How about giving everyone a link to find the Table Maker?

    • Up!

  4. Another great feature, I’m sure I will make use of this on my latest project

  5. Ohhh was what I needed for my website, it is not so easy to find a plugin that makes responsive tables.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest