--- title: "Multicolumn / Table Control" slug: "multicolumn-table-control" updated: 2025-12-11T02:01:41Z published: 2025-12-11T02:01:41Z canonical: "docs.processmaker.com/multicolumn-table-control" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt > Use this file to discover all available pages before exploring further. # Multicolumn / Table Control The Multicolumn / Table control adds a layout element with two or more columns. Drag and place other controls into any of the columns to display them to the width of the Multicolumn / Table control column. Specify the width of each column in `colspan` [HTML attribute](https://www.w3schools.com/tags/att_colspan.asp) settings. The total of all `colspan` attribute settings must be divisible by 12. The control contains two columns of six (6) `colspan` HTML attribute setting each by default. See a [design example](/v1/docs/example-page-navigation-control-to-design-a-multi-page-screen). > This control is only available for the following Screen types: > > - Display type > - Form type > > See [Screen Types](/v1/docs/screens#screen-types). Watch the following product tour to learn how to use a Multicolumn / Table control. [Embedded content](https://app.supademo.com/embed/IIPHwEYt-0G6jFVVhcVG7) For a documented example of using the Multicolumn / Table control, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection). ## Add the Control to a Screen **Permissions** Your user account or group membership must have the following permissions to design a Screen unless your user account has the **Make this user a Super Admin** setting selected: - Screens: Edit Screens - Screens: View Screens See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance. Follow these steps to add this control to the [Screen](/v1/docs/screens): 1. [Create a new Form-type or Display-type Screen](/v1/docs/create-a-new-screen) or [edit an existing one.](/v1/docs/manage-screens#edit-a-screen) 2. From the Controls Menu on the left, expand the **Content Fields** category, and then locate the **Multicolumn / Table** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/933d2b1b-4754-4666-8221-ced0b8f2fd5f.png). 3. Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/d77511d7-2ffa-460c-92a2-24c06b253b19.png) 4. Configure the Multicolumn / Table control. See [Settings](/v1/docs/multicolumn-table-control#inspector-settings). 5. Drag and place others controls into a column. Configure and validate each control's settings. Below is a Multicolumn / Table control that contains information details in the left column and an upload File Control in the right column. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/bb475b49-0e94-4955-a2bc-418fe8307af6.png) --- ## Settings The Multicolumn / Table control has the following configurable settings in the Properties Panel: - [**Configuration** panel](/v1/docs/multicolumn-table-control#configuration-panel-settings) - [**Design** panel](/v1/docs/multicolumn-table-control#design-panel-settings) - [**Advanced** panel](/v1/docs/multicolumn-table-control#advanced-panel-settings) --- ### Configuration Panel Settings Expand the **Configuration** panel from the Properties Panel on the right to configure the following properties: #### Column Width Specify the column width for each column in the control. Add each column and its width specification in the order they are to display from left to right in the control. Specify the width of each column in `colspan` [HTML attribute](https://www.w3schools.com/tags/att_colspan.asp) settings. The total of all `colspan` attribute settings must be divisible by 12. The control contains two columns of six (6) `colspan` HTML attribute setting each by default. See a [design example](/v1/docs/example-page-navigation-control-to-design-a-multi-page-screen). Use the **Show in Json Format** toggle to display these settings in JSON. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/d7a2fe9b-6578-4744-bf17-1309caf21735.png) Each option has the following settings: - **Column:** **Column** is the internal designation for the column that only the form designer views at design time. - **Colspan:** **Colspan** is the width of the column in `colspan` HTML attribute settings. - **Remove:** Click the Remove![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/377f9bc4-d6f8-47f8-9cfc-958fd04eef25.png)icon to remove the column. Follow these steps to add a column and specify its width: 1. Click **Add Column** from below the **Column Width** setting. The **Add New Column** screen displays. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/43766c0c-e2bb-4bcc-a22c-d7990ec70dd4.png) 2. In the **Column Width** setting, enter the width of the column (as described above). 3. Click **OK**. The column displays below the existing columns in **Column Width**. --- ### Design Panel Settings Expand the **Design** panel from the Properties Panel on the right to configure the following properties: #### Text Color Select the text color that displays for this control. Optionally, click the **Clear Color Selection** option to remove the selected color. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/bfd9416a-3193-4028-9e54-911b2bd8749e.png) #### Background Color[](/docs/multicolumn-table-control#background-color) Select the background color that displays for this control. Optionally, click the **Clear Color Selection** option to remove the selected color. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/2c62c11d-b35e-4152-9134-8604f53b1c59.png) --- ### Advanced Panel Settings Expand the **Advanced** panel from the Properties Panel on the right to configure the following properties: #### Visibility Rule[](/docs/multicolumn-table-control#visibility-rule) Specify an expression that indicates the condition(s) under which this control displays. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). If this setting does not have an expression, then this control displays by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/168e4790-5aa5-4441-a2d7-55cae8bc0527.png) For example, this control displays if the variable value **tip** is **1**. For a detailed example of the Visibility Rule setting, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection). Note the following regarding how to use visibility rules: - To make this control hidden until another control contains a value, enter the **Variable Name** setting value of that control to this control's **Visibility Rule** setting. - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings). #### Device Visibility[](/docs/multicolumn-table-control#device-visibility) Select on which device types this control displays: - **Desktop:** The control displays only on desktop devices. Enable the **Show for Desktop** toggle key. - **Mobile:** The control displays only on mobile devices. Enable the **Show for Mobile** toggle key. - **Both:** The control displays on both desktop and mobile devices. Both toggle keys are enabled by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/069ac6cb-c5ca-40c2-94df-085cd53e9491.png) #### CSS Selector Name[](/docs/multicolumn-table-control#css-selector-name) Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. As a best practice, use the same **CSS Selector Name** value on different controls of the same type to apply the same custom CSS style to all those controls. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/39db8cef-80d1-4693-ae03-c2fb0b3600db.png) Then, use this name in the [Custom CSS](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls) feature to apply CSS styling to this control as follows: ```plaintext [selector='Submit Form'] {    color: blueviolet; } ``` See the following best practices regarding custom CSS in Screens: - [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice) - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings)