Provide Complex Header in Grid/Listbox/Tree

Hi, I have a complex columns case, likes below .html:

<div id="w" style="width:400px">
<table border="1" id="g">
<tr>
<th rowspan="2" >Name</th>
<th rowspan="2">ID</th>
<th colspan="3" >GroupA</th>
<th colspan="4" >GroupB</th>
</tr>
<tr>
<th >A1</th>
<th >A2</th>
<th >A3</th>
<th >B1</th>
<th >B2</th>
<th >B3</th>
<th >B4</th>
</tr>
<tr>
<td >Dennis</td>
<td >1234</td>
<td >1</td>
<td >2</td>
<td >3</td>
<td >4</td>
<td >5</td>
<td >6</td>
<td >7</td>
</tr>
</grid>
</div>

I use grid to make this case runing in my project. Below is .zul

<?xml version="1.0" encoding="utf-8"?>
<window id="w" style="width:400px">
<grid id="g">
<columns>
<column label="Name" rowspan="2" />
<column label="ID" rowspan="2"/>
<column label="GroupA" colspan="3" />
<column label="GroupB" colspan="4" />
</columns>
<columns>
<column label="A1" />
<column label="A2" />
<column label="A3" />
<column label="B1" />
<column label="B2" />
<column label="B3" />
<column label="B4" />
</columns>
<rows>
<row>
<label value="Dennis"/>
<label value="1234"/>
<label value="1"/>
<label value="2"/>
<label value="3"/>
<label value="4"/>
<label value="5"/>
<label value="6"/>
<label value="7"/>
</row>
</rows>
</grid>
</window>

But, this case doesn't work.
Because grid doesn't support multiple columns and also column doesn't have rowspan & colspan properties.