About Table ElementClick to copy

Summary: Table Element helps you to create a table and add content or details about your store, products or show the plans of your store to your customers here.

You can check more details in the video tutorial below.

How To Access The Table ElementClick to copy

  • Step 1: Click on the Plus icon which is the Add element function
  • Step 2: Click on the Table element in the dropdown menu
  • Step 3: Drag and drop the element you want into the page editor and then start using it.

Note that you can search this element by using the search function instead of finding it in the sidebar.

Table Element

The Table element comes with multiple variations covering most of your needs. But we will continue to add more variations to help you save time.

Drag a variation to the layout and see how it can be configured.

How To Configure For Table ElementClick to copy

The Table element comes with various parameters for you to  fine-tune content appearance for the best possible conversion rate. Select the element in the layout to see its parameters.

Table Element

The parameters in the General and Styling tabs are specific for this element. Read about them in this article.

General SettingsClick to copy

Style: There are 6 table styles including Default, Basic, Striped rows, Bordered table, Hover rows, and No borderTable Element
Columns, Rows, Header rows, Header columns: Change the number of Columns, Rows, Header rows, and Header Columns by dragging the black dot to desired position or entering the number in the box on the right.PageFly table
Text content: input to change the content inside tableTable Element

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here

Styling SettingsClick to copy

OverallClick to copy

Content Color: Change the color of table content by choosing one out of 8 default colors or you can customize to your liking by using available parameters.Table Element

SpacingClick to copy

  • Padding: edit to adjust the inner spacing of the table’s container
  • Margin: edit to adjust the outer spacing of the table’s container
Table Element

TypographyClick to copy

Font Family: You can choose one from 6 default font family optionsTable Element
Font Size: Adjust font size by dragging the black dot or by entering a number in the box on the rightTable Element
Text Alignment: There are 4 text alignment options available, including Left, Right, Middle, and JustifyTable Element

BackgroundClick to copy

Background Color: Select one out of 8 default colors or customize to your liking by using  available parametersTable Element
Background image: Click Select image > Choose image > Click SelectTable Element

You can check more information about the Styling tab here

Best Practices For Using Table ElementClick to copy

  • Use clear and concise headers to define each column in your table. This helps users understand the information being presented
  • Avoid overloading your table with excessive information
  •  Ensure your table displays well and adjusts to different screen sizes, especially mobile devices

Frequently Asked QuestionsClick to copy

Why Should You Use A Table On A Web Page?Click to copy

Table Element is the best way to display large amounts of data, as it’s easy to scan, compare, and analyze, to oversee connection between statistics.

Can I Create Table Element In Shopify?Click to copy

Yes, you can, simply follow this guide, as now you can input, edit data, and then customize the table for the best UI experience. A table is the best way to show off your data, which should be constructive and bring great value to your page’s main contents.

Can I Add Images Inside Table Element?Click to copy

Currently, PageFly does not support adding images or icons inside the table but we’ll continue to improve it.

Additional ResourcesClick to copy

Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us