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.
Note: These views are different from the Table and Service data table views.
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.
You specify the HTML attributes in the HTML Attributes properties tab.
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 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:

Table 1. Appearance configuration properties for Table layout
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:
  • Separate: adds a space between the cells.
  • Collapse: no space between cells.
String

Example

To display two Text views in a table structure:
  1. Add a Table layout view.
  2. Insert a Table layout row view within the Table layout view.
  3. Insert two Table layout cell views within the Table layout row view.
  4. Insert one Text view in each Table layout cell view.
  5. 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:
  1. Add a Table layout view.
  2. Insert three Table layout row views within the Table layout view.
  3. Insert three Table layout cell views within the first Table layout row view that you added in step 2.
  4. Insert one Table layout cell views within the second Table layout row view that you added in step 2.
  5. Insert two Table layout cell views within the third Table layout row view that you added in step 2.
  6. 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.
  7. Insert a Button view within the second cell of the first row.
  8. Insert a QR code view within the third cell of the first row.
  9. 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.
  10. Insert a Date Picker view within the first cell of the third row.
  11. Insert a Text area view within the second cell of the third row.
The result is a layout that looks similar to the following image.
The image shows three rows displayed as follow: the first row contains a button switch to Off than spans over 3 rows, a button labeled Button, and a QR code labeled QR code. The second row contains a Single Select drop-down field, labeled Single Select. The third row includes a Date Picker field labeled Date Picker that displays a calendar for the month of July 2017, and a Text area labeled Text area filled with Lorem ipsum text.

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.