Next we will add a tablePane component to HomePage.cls. This component creates an HTML table on the Web page and automatically fills it with Caché data based on an SQL query. Each row of the table contains the data from one row of the query results.
Add the following tablePane to the central vgroup.
<vgroup width="90%">

  <tablePane
    width="900px"
    id="ContactTable" 
    tableName="ZenTutorial.Contact"
    maxRows="1000" 
    pageSize="10" 
    showRowNumbers="true" 
    showZebra="true" 
    useSnapshot="true"
    extraColumnWidth="5%"
    caption="US Contacts">
    
   <column colName="ID" hidden="true"/>
   <column header="Name" width="20%" colName="Name" filterType="text"/>
   <column header="Type" width="9%" colName="ContactType"/>
   <column header="Street" width="20%" colName="Address1_Street"/>
   <column header="City" width="12%" colName="Address1_City"/>
   <column header="State" width="5%" colName="Address1_State"/>
   <column header="Zip" width="7%" colName="Address1_Zip"/>
   <column header="" width="5%" linkCaption="edit" 
         link="javascript:zenPage.showContactForm('#(%query.ID)#');"/>
   <column header="" width="12%" linkCaption="view phones" 
         link="javascript:zenPage.displayPhones('#(%query.ID)#');"/>
 </tablePane>

 </vgroup>
Note the following about this tablePane:
Note:
To learn more about the tablePane component including column links, and the different ways to specify queries, read Zen Tables in Using Zen
To learn more about Zen Page Runtime Expressions, read Zen Page Runtime Expressions in the Zen Application Programming section of Using Zen