Working with Table Layout"

From Documentation
 
(One intermediate revision by one other user not shown)
Line 10: Line 10:
 
=Introduction=
 
=Introduction=
  
In the previous [http://docs.zkoss.org/wiki/Working_with_Portal_Layouts Working with Portal Layouts], and [http://docs.zkoss.org/wiki/Using_Columnlayout_Component 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.
+
In the previous [[Small_Talks/2008/August/Working_with_Portal_Layouts | Working with Portal Layouts]], and [[Small_Talks/2008/June/Using_Columnlayout_Component | 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=
 
=Live Demo=

Latest revision as of 07:00, 8 December 2010

DocumentationSmall Talks2008AugustWorking with Table Layout
Working with Table Layout

Author
Robbie Cheng, Engineer, Potix Corporation
Date
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.




Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.