Processing...
Description & Source Code

Tablelayout is an HTML table based container. Developers specify the number of columns to be divided within the tablelayout, and adjust the "colspan" and "rowspan" of each "tablechildren",the basic unit of division, to achieve the desired layout.

This feature requires ZK EE.
table_layout.zul
<tablelayout columns="3">
	<tablechildren rowspan="2">
		<panel title="Table 1" border="normal" height="500px">
			<panelchildren>
				<vlayout>
					<image src="/widgets/layout/table_layout/img/castle.png" width="380px" />
					<hlayout spacing="10px">
						<image src="/images/zkpowered_l.png" />
					</hlayout>
					ZK Rocks !
				</vlayout>
			</panelchildren>
		</panel>
	</tablechildren>
	<tablechildren>
		<panel height="229px" title="Table 2" border="normal">
		 	<panelchildren>
		 		<html><![CDATA[
			 		<h4>Direct RIA</h4>
			 		<ul>
			 			<li>No JavaScript</li>
			 			<li>No Exposure of Biz Logic</li>
			 			<li>No Sync Hassle</li>
			 			<li>No Data Inconsistency</li>
			 			<li>No Security Hazard</li>
			 		</ul>
			 	]]></html>
		 	</panelchildren>
		 </panel>
	</tablechildren>
	<tablechildren>
		<panel height="229px" title="Table 3" border="normal">
		 	<panelchildren>
		 		<html><![CDATA[
			 		<h4>Direct RIA</h4>
			 		<ul>
			 			<li>Boosting Productivity</li>
			 			<li>Minimal Maintenance</li>
			 			<li>Engaging User Experience</li>
			 			<li>Fast Prototyping</li>
			 			<li>Real-time Push</li>
			 		</ul>
			 	]]></html>
		 	</panelchildren>
		 </panel>
	</tablechildren>
	<tablechildren colspan="2">
		<panel title="Table 4" border="normal">
		 	<panelchildren>
		 		ZK: No1. Ajax + Mobile
		 		<image src="/widgets/layout/table_layout/img/earth.png"/>
		 	</panelchildren>	
		 </panel>
	</tablechildren>
</tablelayout>