Back to contents

How to create a table with JetElements Table widget

Learn more about adding a schedule or a list to a webpage with Table widget provided by JetElements addon for Elementor.

JetElements Table widget has loads of customization settings so that you can style it up as you need. With the help of this widget, you are able to create a schedule, classify the information, etc.

Table widget

Creating a table with Table widget

Step 1 — Firstly, log in to your website. Then, navigate to the page where you want to add the Table widget and click Edit with Elementor option.

Step 2 — Search for the Table widget. Drag and drop it into a new section.

Table widget

Step 3 — Move on to the Content > Table Header block. Here you are able to add or remove items (this affects the number of columns), fill in the headings for each of the columns, add icons/images and specify their position.

Moreover, you can determine the Column Span and Width, as well as pick Color of the text and the background in the Advanced and Style settings blocks.

Content settings in Table widget

Step 4 — Proceed to the Content > Table Body block. This is a section, where you can add more rows to your table.

Table body settings in Table widget

Step 5 — To add a new row, create an item by clicking the Add Item button and select the Start New Row option in the Action dropdown. Here, you can also change the background color of the row and the text color.

A row consists of the cells, it should have at least one cell in order to become visible.

Step 6 — To add a new cell, create a new item by clicking the Add Item button and select Add New Cell from the Action dropdown. Fill it with the content and add the link if necessary. You can also pick an Icon, fix the Column Span, the Row Span, the text Color and the Background color.

Table body settings

You can add as many cells as you need in each of the rows. Pay attention, that the number of cells can’t exceed the number of columns you have! Also, you are able to drag the Cell and Row items higher or lower according to your needs to change the order of the cells in places or change the position of rows, etc.

Step 7 — Navigate to the Content > Settings block. Here you can enable or disable the Sorting Table option (to allow the visitors to sort through the content of the specific column) and the Responsive Table option. Also, don’t forget to specify the devices, where this table will be responsive.

Settings in Table widget

Step 8 — Go forward to the Style block, where you are able to make your table look more eye-candy. Here you are able to customize the Table Header and the Table Body according to your needs.

Style settings in Table widget

That’s it! Build the table and place any type of content in the cells, rows, and columns.