Data > Table

A table represents a collection of repeating elements or groups of elements on the web page. Typically, tables are comprised of columns and rows with column headers indicating the content of each column and help anchor the specific column.


In certain cases, a table can be more complex with several types of elements in a single cell, split rows or columns, nested table within a table, or even a repeating group that is not laid out as a table.


This article covers the basic of capturing a table within the Designer. For lists, which are similar to tables but less structured, please refer to the Lists article.


A demonstration of how to capture a table can be found in the below video.




Capturing a Table


To grab a table from the web application select Data: Table control in the Capriza Designer. Click "Data" in the Simplify Toolbar, then select "Table" from the dropdown menu.



Follow the tooltips to start adding your table. Use the ‘+/-’ buttons to narrow or broaden your region of capture (the green region).


Start by selecting the first column header.




Then, select the first item under the selected column header.




Select another item in the same column. The Designer learns the structure of the table and columns once it "sees" at least two items in a column. It is possible to grab a table with only one row but it may require strengthening.




The Capriza Designer can now identify the column and automatically highlight all items in that column. If the selection is correct, click on the column again to select it, and it will display in the mobile screen.




To select additional columns in the same table, select the header of the next column you would like to add and click again to add.



By default, the first three columns of the table you selected will show on the mobile page.. If you grabbed more than three columns, a drill page will automatically be created and all the columns will be displayed there.


The drill page can be accessed by tapping the row and the user can navigate the rows directly from the drill page by tapping the up/down icons in the zapp header.



Removing a Column


To remove a column from the table, go to the table Style tab and select the Items tab of the table. If you are using a template (see the Table Style Properties article) first remove the column from the template by clicking on the '-' icon to the right of the column name or dragging it out of the template to the Unassigned list.




Then remove it from the Unassigned list by clicking on the '-' icon on the right.




Activating a Non-Text Table Item


Tables may contain items that are not just text, such as buttons, links, dropdowns, etc. By default, each item is grabbed as text and to change the item to its correct type, you need to indicate the type of the item.


Once you grabbed the table as described above, select the type of control that represents the type of the item in the table from the Simplify toolbar, then click on the relevant item in the table on the web page.


For example, if the items in the table are links, select Link > Text Link from the toolbar then click on the link in the table to select it. All the items in that column will become links.




Data Enhancement


If you would like to incorporate interactive controls within your table, you can use the Data Enhancement control after adding your table.


Select Data > Data Enhancement from the Simplify toolbar and follow the instructions on the screen.



Available options are covered in further detail in the Data Enhancement article.


Strengthening a Table


A table rank is determined by the ability of the engine to locate the table on the web page but it is also impacted by the ranks of the individual columns.




You can answer Basic and Expert questions about the table itself or you can drill into each column and strengthen each data element separately.


To learn more about strengthening individual controls, please see Strengthening Basics and Strengthening: Best Practices.


Updating an Existing Table


You can update an existing table to add more columns and controls. To do so, select "Table" from the Data dropdown, and click inside of the already captured table. It will be highlighted in green. 



The Designer will prompt you to select another header, and the additional columns will be added to the existing table.




Styling a Table


Please refer to Table Style Properties for an overview of available styling options.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Please sign in to leave a comment.