How to add Table Header with Table Widget?

What is Table Header?

A row that appears at the top of the table giving a title to columns beneath is Table Header. It is defined with the <th> tag.

Multiple rows and columns can be added to Table Header. See How To Add Rows And Columns to the Table?

After adding columns to Table Header following option will appear for Cell

  • CONTENT (?)
    • Enter a heading/title for the column beneath.
    • For Example- If you want to create a table to compare A and B gadgets, then type A in one column and B in another column.
  • ICON / IMAGE (?)
    • This allows you to add icon from the provided list or image to the header field.
    • Icon/Image can be added with or without content.
    • For Example- If you want to create a table to compare A and B products, then you can just use their logo images in the header. It will give a nice look to the table.
    • Icon/Image style like scale(size), position, spacing etc. can be managed from Icon / Image tab under Style tab.
  • ADVANCE (?)
    • This allows merging two or more table cells located in the same row or column into a single cell.
    • By default value for Column Span and Row Span will be 1. Add the number for column and row that needs to merge.
    • For Example- If you wish to combine 2 columns to the current cell then add Column Span value 3. It will add 2 columns to the current cell.
    • Color and Background Color can be applied to each column separately to create a nice look for headers.


  • To change the row and column structure simple drag and drop the cell from left edge with three vertical dots.
  • To duplicate the cell click the copy icon.

Refer Table Widget document here.

Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Get access to growing library of 40+ innovative widgets and 300+ creative templates.

Scroll to Top