The Table Control is designed primarily for creating structured, print-friendly layouts. With customizable columns and rows, cell merging, and advanced styling options, it allows you to design professional and polished tables for forms, reports, and other documents. Whether you need a simple grid or a complex nested layout, the Table Control ensures your data is presented clearly and optimized for perfect printouts.
When to Use a Table Control
The Table Control is an excellent choice in the following scenarios:
Print-Optimized Layouts: Design tables for forms, invoices, reports, or other content that needs to be printed with precise alignment and formatting.
Structured Data Presentation: Organize and display structured data such as schedules, product lists, or comparison charts.
Complex Forms: Create print-friendly forms with fields neatly arranged in rows and columns for easy readability.
Professional Reports: Develop tables that highlight key data points and maintain a clean structure suitable for distribution.
Nested Layouts: Use nested tables within cells to create multi-layered, organized designs for comprehensive print materials.
Custom Styling for Print: Apply borders, padding, and text alignment to create a professional, polished look specifically for print-ready documents.
By utilizing the Table Control, you can ensure your layouts meet the highest standards for print quality and functionality.
Create a Table
You can add a Table Control to your page from the Controls panel.
By default, the table contains three rows and three columns, with the columns set to a width of 100px and the rows set to a height of 70px. This default setup provides a starting point for creating a clean and structured table layout.
Pro Tip
To create an organized and consistent table structure:
Start with the default table configuration and adjust the rows and columns as needed.
Use the table’s styling options to define clear visual boundaries and alignment for your content.
Add appropriate controls like text boxes, images, even or tables to enhance the functionality and design of your table.
Configuring Table Control
Adding Columns and Rows
The first step in configuring a table is to set up its structure by adding columns and rows:
Add Columns and Rows: Navigate to the Table section and click the + Add button in the column or row settings area to insert new columns or rows.
Delete: Click the Delete button to to quickly remove a column or row.
Adjusting Column and Row Sizing
You can control the size of each column and row to fit your content needs:
Custom Sizing: To adjust the size of table, enter a custom size for both columns and rows in the row. By default, the width of columns is set to 100px and the height of rows is set to 70px. You can also set a specific width in PX , %, em, rem, vw, vh, auto.
Min/Max Settings: Define minimum and maximum dimensions for rows or columns to ensure consistent sizing while allowing flexibility. For example, set a row’s minimum height to
200pxand its maximum toAuto.
Appearance
Use the Appearance tab to set Dynamic Display Rules that control table visibility based on conditions like user input or data values, enabling responsive and interactive tables.
Styling the Table
The Style tab offers extensive customization options to create a polished and professional look for your table:
Content Padding: Adjust the space between the content and the cell borders to ensure readability and alignment.
Borders: Customize border styles, thickness, and colors for the entire table or specific rows, columns, or cells.
Background Styling: Apply background colors or patterns to individual cells, rows, columns, or the entire table for better visual appeal.
Font Customization: Adjust the font size, weight, and color to match the theme of your document.
Hover Effects: Add hover effects for cells or rows, providing visual feedback in interactive scenarios.
Alignment Options:
Align text and content vertically and horizontally within cells to maintain consistency.
Set grouped content alignment for multi-element layouts.
Spacing Between Cells: Adjust the spacing between table cells to create a clean and balanced layout.
Row and Column Highlights: Use alternating row or column colors to improve readability, especially for larger datasets.
Table Width and Height: Define overall dimensions to fit the content or container perfectly.
Custom CSS: Add advanced custom styles to align the table with unique design requirements.
Advanced Settings
Set the Advanced options that are applicable to this control.
Merging and Splitting Cells
To create more complex layouts:
Merge Cells: Select two or more adjacent cells, then click Merge Cells to combine them into a single cell.
Split Cells: Select a merged cell and click Split Cells to revert it back to individual cells.
This feature allows for flexible layouts and efficient space utilization within the Table Control.
Adding Content to the Table
In the Table Control, you can add a variety of other controls to enhance its functionality. These include text box fields, images, gallery controls, and even tables. Each cell in the table can accommodate multiple elements, enabling you to design versatile and dynamic layouts. For example, you might combine text and images in one cell or include a table to create detailed, multi-layered structures.
By leveraging these options, you can create a table design that is both functional and visually appealing, optimized for print and display purposes.