Table layout, Table layout row, and Table layout cell
Table layout, Table layout row, and Table layout cell create a section that includes
other views and displays them in a table-like structure that can be configured using HTML
attributes.
The Table layout row and Table layout cell do not have any configuration options. Instead, you
can use the
colspan
and rowspan
HTML attributes to specify how a
table layout cell view is displayed in a table layout. For these views, you must use the same
structure as in an HTML table: - Table layout row views are placed inside a Table layout view.
- Table layout cell views are placed inside Table layout row view.
Note: The layout of these views is not WYSIWYG in the designer.
Configuration properties
Under Configuration, set or modify the configuration properties for the view.
- Screen size
- A configuration property that has the Screen Sizes icon
beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.
- Theme definitions
- Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.
The appearance configuration properties for Table layout are shown in the following table:
Appearance configuration property | Description | Data type |
---|---|---|
Border spacing | Specifies the spacing between cells in pixel units. | String |
Border collapse | Specifies one of the following setting for space between the cells:
|
String |
Example
To display two Text views in a table structure:
- Add a Table layout view.
- Insert a Table layout row view within the Table layout view.
- Insert two Table layout cell views within the Table layout row view.
- Insert one Text view in each Table layout cell view.
- Optionally, set Border spacing property to 25, and the Border collapse property to Separate to add space between the cells.
You can also use multiple Table layout row and Table layout cell views within a Table layout
view, and use the 
colspan
and rowspan
HTML attributes to make
cells span over more than one column or row. For example:- Add a Table layout view.
- Insert three Table layout row views within the Table layout view.
- Insert three Table layout cell views within the first Table layout row view that you added in step 2.
- Insert one Table layout cell views within the second Table layout row view that you added in step 2.
- Insert two Table layout cell views within the third Table layout row view that you added in step 2.
- In the HTML attributes of the first cell in the first row, add the
attribute
rowspan
, set it to 3, and insert a Switch view within the cell. - Insert a Button view within the second cell of the first row.
- Insert a QR code view within the third cell of the first row.
- In the HTML attributes of the cell of the second row, add the attribute
colspan
, set it to 2, and insert a Single select view within the cell. - Insert a Date Picker view within the first cell of the third row.
- Insert a Text area view within the second cell of the third row.

Methods
For detailed information on the available methods for Table layout, Table layout row, and Table layout cell, see the Table layout, the Table layout row, or the Table layout cell JavaScript API.
Additional resources
For information about how to create a coach or page, see Building coaches.
For information about standard properties
(General, Configuration,
Positioning, Visibility, and HTML
Attributes), see View properties.