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.
For more details, refer to the video tutorial below:
How To Access 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 > Click on the Table element in the dropdown menu, under the Advanced section.
- 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.
How To Configure For Table Element
The Table element comes with various parameters to help you…
To start configuring, click on the Table element you’ve added, then:
- Go to the General tab to adjust General configurations such as text, alignment, and heading level (H1, H2, H3, etc.).
- Switch to the Styling tab for Styling configurations to customize the appearance, including font size, color, spacing, and more.
General Settings
Check 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, ANIMATION parameters here.
Styling Settings
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
|
 |
|
 |
|
 |
|
 |
Background
Note: The background color will not be applied to header rows and columns. |
 |
|
 |
You can check more information about the Styling tab here.
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?
Currently, PageFly does not support adding images or icons inside the table, but improvements are ongoing, and this feature may be added in future updates.
Previous article
