Working with Table Layout"
m (→Live Demo) |
|||
| (One intermediate revision by one other user not shown) | |||
| Line 10: | Line 10: | ||
=Introduction= | =Introduction= | ||
| − | In the previous [ | + | 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
Robbie Cheng, Engineer, Potix Corporation
Aug 18, 2008
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. |