How to Use the Table Element

De 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. Het tabelelement toevoegen

Step 1: Insert a Table

1. Open your page editor.
2. Ga naar Elementen toevoegen → Select Tafel 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.
• Toevoegen 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.
• Toevoegen 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.
• Aanpasbaar – 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.