Working with Table Layout

Robbie Cheng, Engineer, Potix Corporation
Aug 18, 2008

Version

Applicable to zk-3.5.0-FL-2008-08-18 and later.

Introduction

In the previous Working with Portal Layouts, and Using Columnlayout Component, we have shown various way to lay out the content. In this article, we will guide you how to use Tablelayout. Tablelayout is a container as an HTML table whose columns can be specified, and rowspan and colspan of its child can also be specified to create complex layouts within the table.

Live Demo

Let's take a look at the real demo.

Example in the following fragments,

  <tablelayout id="tbl" columns="3">
		<tablechildren id="tc1" rowspan="1" colspan="1">
			<panel title="table1" border="normal"
			 	maximizable="true" collapsible="true" >
			 	<panelchildren>Panel</panelchildren>	
			 </panel>
		</tablechildren>
		<tablechildren  colspan="3">
			<panel title="table2" border="normal"
			 	maximizable="true" collapsible="true">
			 	<panelchildren>Panel</panelchildren>
			 </panel>
		</tablechildren>
		<tablechildren >
			<panel title="table3" border="normal"
			 	maximizable="true" collapsible="true">
			 	<panelchildren>Panel</panelchildren>	
			 </panel>
		</tablechildren>
		<tablechildren>
			<panel title="table4" border="normal"
			 	maximizable="true" collapsible="true">
			 	<panelchildren>Panel</panelchildren>	
			 </panel>
		</tablechildren>
		................
</tablelayout>
  

As you can see, a Tablelayout can have more than one column (i.e. Tablechildren). The rowspan and colspan of Tablechildren can be specified to create complex layout. Though, only Panel components is allowed in Tablechildren, any other ZK components could be embedded in Panel component.

Download

Download the tablelayout-demo.zip for the article here.

Summary

In this small talk, we have demonstrated you the power of Tablelayout, and it provides more flexibility to design the layout with ZK. If you come up with any idea, please feel free to leave a message or post it on ZK forum.