Elementor Table Tutorial: Create Tables on WordPress with Elementor

Intro

We all live in a world of informational and technological progress. Thanks to elementor tables, people have learned how to organize information. Sometimes adding a table to your website is necessary as it is a great solution to present data more effectively and systematically. You can either hand code it or copy and paste a table from another table generator but then you will have responsiveness issues.

If you have a WordPress website, I would like to offer you an amazing solution – Table widget for Elementor. This is an add-on companion for the most advanced front-end drag-and-drop page builder – Elementor. Learn how to create feature rich tables and customize them right inside the page builder.

How to Create Tables on WordPress with Elementor

Make sure to get JetElements plugin to be able to create tables on WordPress with Elementor.

  1. Search for the Table widget on the elements panel and drag-and-drop it to the center section.
  2. Go to the Content tab > Table Header section to add Column Headings. Then, you are suggested to edit Content – add the Text and Icon/Image if you wish. The Advanced tab allows you to adjust Column Span and Column Width. Column Width should be adjusted to 0 if you want the width to be set automatically. The Style tab helps you set Color and Background color.
  3. Go to the Content tab > Table Body section and adjust Start Row item in Action drop-down. You are welcome to choose Add New Cell for Action, add some Text, Link, and add Icon/Image. The Advanced tab allows you to choose Column Span or Row Span. Choose the right Color and Background Color in the Style tab.
  4. The Content tab > Settings section allows you to enable Sorting Table option and Responsive Table one. Once Responsive Table is on, please choose the type of the devices you wish the table to be responsive on.
  5. Navigate to the Style tab > General section to choose Table Width, Column Width, Table Alignment, Border Radius, and Box Shadow.
  6. Next, go to the Style tab > Table Header section to set up Typography, Color, Background Color, Padding, Border Type, Alignment, and Vertical Alignment. If you prefer to add Icon, Image, and Sorting Icon, all these settings can be adjusted in the Table Header section.
  7. Navigate to Style tab > Table Body to adjust Typography, Row Color, Row Background Color, enable Striped row (Even Row Color, Even Row Background Color, Link Color), Padding, Border Type, Alignment, and Vertical Alignment. Also, in this section, you can adjust the settings for Icon and Image if you added any.

Anjali Punjab

Anjali Punjab is a freelance writer, blogger, and ghostwriter who develops high-quality content for businesses. She is also a HubSpot Inbound Marketing Certified and Google Analytics Qualified Professional.