How to add Table Content with Table Widget?

Table widget allows adding text, number, HTML, image, icon in the content area.

After adding Table Header, content can be added to Table Content in the table.

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

After adding columns to Table Content following option will appear for Cell-

• CONTENT (?)
  • Enter a content for the column. Content can be in the form of text, number, HTML or special characters.
  • For Example- If you want to add button add HTML for a button like <button>Click Me</button>
  • You can link the content easily by entering the URL in given Link field.
• ICON / IMAGE (?)
  • This allows you to add icon from the provided list or image to the content field.
  • Icon/Image can be added with or without content.
  • For Example- If you have created a table to compare A and B products. And want to show the logo of both products then you can just use their logo images in the content. It will give a nice look to the table.

To resize or style images in your table, go to the Style tab and open the Icon / Image section. These controls apply to all image cells in the table at once, there is no per-cell image sizing.

• Scale: Sets the image width in px (default: 30px, range: 1–500px)
• Image Position: Places the image Before or After the cell text
• Image Spacing: Sets the gap between the image and text
• Border Radius: Rounds the image corners

If you need different image sizes in individual cells, that requires custom CSS.

• 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.
  • Convert this Cell into Table Heading? option will allow setting current cell as a header cell. It will inherit all styles set for Table Header from Style tab.  It is useful when one wants to show vertical headers for the table. (?)

Notes:

• 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.