How to Use the Table Element

The Table Element is a great way to display structured data on your website. It can be used for price comparisons, schedules, product features, or any kind of organized information.

1. Adding the Table Element

Step 1: Insert a Table

1. Open your page editor.
2. Go to Add Elements → Select Table under Content Elements.
3. Drag and drop it onto your page.

2. Customizing the Table Structure

Step 2: Adjust Rows & Columns

• Click on the table container to access settings.
• Adjust the number of rows & columns using the sidebar.
• You can type a custom number if you need more than the default options.

Step 3: Enable or Disable Table Sections

• Table Header: Toggle the top row on/off for column labels.
• Sidebar: Turn on/off the first column to use it as row labels.

Step 4: Adjust Table Width

• Set the width to 100% for a full-width table.
• Adjust the column width manually to balance spacing.

3. Adding & Formatting Content

Step 5: Add Text, Icons, and Elements

• Click on any cell to type in text.
• Add icons to a row or column for better visual representation.
• Drag buttons, images, or other elements into the table for enhanced layouts.

Step 6: Formatting Table Content

• Change text alignment (left, center, right).
• Adjust font size, style, and weight under Typography.
• Customize header & row colors for better readability.

4. Styling the Table

Step 7: Customize Colors & Borders

• Set background colors for the header, sidebar, and content cells.
• Enable alternate row colors for better contrast.
• Add borders & shadows for a structured look.

Step 8: Adjust Padding & Spacing

• Modify padding & margins for better text spacing.
• Increase row height to make the content more readable.

5. Mobile & Tablet Optimization

Step 9: Responsive Adjustments

• Check how your table appears on tablet & mobile views.
• If the table is too wide, it will have a horizontal scroll bar for mobile users.
• Consider hiding some columns or using a simpler table version for mobile users.

6. Why Use the Table Element?

• Perfect for structured data – Compare products, pricing, or schedules.
• Customizable – Adjust colors, fonts, spacing, and element placement.
• Supports multiple elements – Add buttons, images, and icons inside the table.
• Mobile-friendly – Allows horizontal scrolling on smaller screens.

With these settings, the Table Element helps create an organized and visually appealing way to display your content.