Table
About Table Element
Table Element helps you to create a table showing product information or your pricing plans.
For more details, refer to the video tutorial below:
Legacy Editor - How To Access & Configure The Table Element
Step 1: In the PageFly editor, click on the Elements button on the left menu.
Step 2: Look for the PageFly tab > Under the Advanced section, click on the Table element. Note that you can search this element by using the search function instead of finding it in the sidebar.
Step 3: Drag and drop the desired Table variant into the page editor. Now you can start configuring the 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.
The Table element comes with various parameters to help you customize its appearance and functionality, such as adjusting row, column quantities, settings header rows and columns, and applying custom fonts or colors, etc. …
General Settings
Go to the General tab to adjust General configurations such as text, alignment, and heading level (H1, H2, H3, etc.).
Check the main settings in the General tab below:
Style: Choose from 6 table styles: Default, Basic, Striped Rows, Bordered Table, Hover Rows, and No Border.
Columns, Rows, Header rows, Header columns: Adjust the number of columns, rows, header rows, and header columns by dragging the black dot to the desired position or entering the specific number in the box on the right.
Text content: Change the content for text fields inside the table. Click on a cell to enter and format the text as needed.
You can get further information about ATTRIBUTES, VISIBILITY, and ANIMATION parameters here
Styling Settings
Switch to the Styling tab for Styling configurations to customize the appearance, including font size, color, spacing, and more.
Overall
In the overall section, you can change Content color: Change the color of the table’s content by choosing from one of the 8 default colors or customizing your own using the color picker.
Spacing
Padding: Adjust the inner spacing of the table’s container to ensure content is properly spaced within each cell.
Margin: Adjust the outer spacing of the table’s container to manage the distance between the table and other elements on the page.
Typography
Font Family: Select from 6 default font family options to match your store’s branding.
Font Size: Adjust the font size by dragging the black dot or entering a specific number in the box.
Text Alignment: Choose from 4 text alignment options: Left, Right, Center, and Justify to properly align your text within the cells.
Text style: Apply text styles (bold, italic) to enhance the appearance of your text.
Background
Background Color: Select a background color for the table using one of the 8 default colors or customize your own.
Note: The background color will not be applied to header rows and columns.
Background image: Add a background image to the table by clicking Select image, choosing your image, and clicking Select.
You can check more information about the Styling tab here.
Gen 2 Editor - How To Access & Configure Table Element
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model (slot plans).
The access steps are the same as in the Legacy editor, but we will continue adding more variations to help you save time.
The Table element comes with various parameters to help you customize its appearance and functionality, such as adjusting row, column quantities, settings header rows and columns, and applying custom fonts or colors, etc. …
For better visualization, you can refer to this video tutorial below:
General Settings
Check the main settings in the General tab below:
Content:
Rows, Columns: Adjust the number of columns, rows
You can also add rows and columns by clicking on the inside element such as Table row, Table cell as a parameter displayed.
Top row header, column header: Mark the first row or column as header
Borders: Set border for table. You can set a border for only a table cell.
Paragraph text: Change the content for text fields inside the table
You can get further information about ATTRIBUTES, VISIBILITY, and ANIMATION parameters here.
Note: Only these elements can be added inside cells
Flex block, Heading, Paragraph, Button, Image, Video, List, Icon, Divider.
Styling Settings
Switch to the Styling tab for Styling configurations to customize the appearance, including font size, color, spacing, and more. For the Flex editor, a new parameter named “Size” will be added, you can change the width and height of the flex block.
Layout
Click on the Table cell element to adjust settings for parameters. You can check the Page Editor - Styling Tab article for more details (under the Layout Settings of Gen 2 Editor - Styling Tab).
Overall
In the overall section, you can change Content color: Change the color of the table’s content by choosing from one of the 8 default colors or customizing your own using the color picker.
Spacing
Padding: Adjust the inner spacing of the table’s container to ensure content is properly spaced within each cell. Padding can also apply to inside elements like Table cells.
Margin: Adjust the outer spacing of the table’s container to manage the distance between the table and other elements on the page.
Typography
Font Family: Select from 6 default font family options to match your store’s branding.
Font Size: Adjust the font size by dragging the black dot or entering a specific number in the box.
Text Alignment: Choose from 4 text alignment options: Left, Right, Center, and Justify to properly align your text within the cells.
Text style: Apply text styles (bold, italic) to enhance the appearance of your text.
Background
Background Color: Select a background color for the table using one of the 8 default colors or customize your own.
Note: The background color will not be applied to header rows and columns.
Background image: Add a background image to the table by clicking Select image, choosing your image, and clicking Select.
Common Cases
Table Not Responsive on Mobile Devices
Use PageFly’s responsive design tools to adjust the table’s layout for mobile devices. Ensure that the table cells are not too wide and that text is appropriately sized for smaller screens. Preview the table on different device sizes within the PageFly editor and make necessary adjustments to ensure readability and usability on all devices.
Table Style Not Matching the Theme
Use the Styling tab to customize the table’s appearance. Change the font family, font size, and text color to match the theme’s style. Adjust the background color or add a background image to ensure the table integrates seamlessly with the store’s design. Utilize the default table styles provided (e.g., Striped Rows, Bordered Table) to quickly apply a cohesive look.
Frequently Asked Questions
1. Why should you use a Table on a web page?
The Table element is the best way to display large amounts of data as it is easy to scan, compare, and analyze. It allows users to quickly understand and oversee connections between statistics.
2. Can I add images inside the Table element?
Yes, you can use the Gen 2 editor to add the table element. The new table element supports adding images within the table.
Additional Resources
Last updated
Was this helpful?