🛍️🛍️

Days
Hours
Minutes
Seconds

💸  [Extended] BFCM Sale! Get up to 50% OFF!

Documentation

How to Add Table Header with Table Widget?

PowerPack Table Widget for Elementor can be used to create multiple Table layouts for your website. In this doc, we will go through the steps involved in adding a Table Header with the Table Widget.

What is a Table Header?#

Table Header is a row used at the top of a table to label each column. The table header is defined with the <th> tag. For example, in the below table, we have a Table Header with 3 columns - Name, City, and Date.

Add a Table Header to the Table Widget
Add a Table Header to the Table Widget

Add Table Header#

With PowerPack, it is really simple to add a Table Header to your Table. Please follow the below-mentioned steps to do so:

  • Add PowerPack Table Widget to your Elementor page.
  • Head over to the Header section in the Content tab of the Table widget.

Customize Table Header Options
Customize Table Header Options

  • By default, 3 headers will be added in the Header section, so that you can get started without any delays. You can further add or delete Headers depending on the number of columns you want in your Table.

Customize Table Header#

Once you have added the Table Header, you can customize it with 3 options available:

  • Content: Using this option, you can add a "Title" to your Table Header.

Add Title to Header
Add Title to Header

  • Icon: The "Icon" option allows you to add an icon or image before or after the Header title. You can either choose an icon from the list of predefined icons or upload your own SVG icon.

Set an Icon for Header
Set an Icon for Header

  • Advanced: The Advanced option comes with 4 sub-options:
    • Column Span: Column Span gives you an option to merge 2 or columns together into a single cell. By default, the value of Column Span is set as "1".
    • Row Span: Row Span allows you to merge 2 or more rows together into a single cell. The default value of Row Span is set as "1".
    • CSS ID and CSS Classes: You can enter your custom CSS ID and Class here, and then use it to style the particular Table Header as per your requirement.

Advanced Options in Table Header
Advanced Options in Table Header

This was a detailed guide on how you can Table Header in the Table Widget of PowerPack Addons for Elementor.

Not the solution you are looking for?

Please check other articles or open a support ticket.

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.