About Table Element
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 Element
- 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.
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 Element
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.
The parameters in the General and Styling tabs are specific for this element. Read about them in this article.
General Settings
| Style: There are 6 table styles including Default, Basic, Striped rows, Bordered table, Hover rows, and No border |  |
| 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. |   |
| Text content: input to change the content inside table |  |
You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here
Styling Settings
Overall | |
| 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. |  |
Spacing | |
|  |
Typography | |
| Font Family: You can choose one from 6 default font family options |  |
| Font Size: Adjust font size by dragging the black dot or by entering a number in the box on the right |  |
| Text Alignment: There are 4 text alignment options available, including Left, Right, Middle, and Justify |  |
Background | |
| Background Color: Select one out of 8 default colors or customize to your liking by using available parameters |  |
| Background image: Click Select image > Choose image > Click Select |  |
You can check more information about the Styling tab here
Best Practices For Using Table Element
- 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 Questions
Why Should You Use A Table On A Web Page?
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?
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?
Currently, PageFly does not support adding images or icons inside the table but we’ll continue to improve it.
