Multiple Data Providers In An Htmltable Or Cgridview

I've been searching all day on this problem of mine, and unfortunately nothing worked for me
so here's my problem, i have 2 data providers in my controller

		$cityDataProvider=new CActiveDataProvider('City', array(
				'criteria'=>array(
						'condition'=>'project_site_id=:siteId',
						'params'=>array(':siteId'=>$model->id),
				),
		));

this one (filters the id of the city from the project site it is related to.)

		$hsFormOneaDataProvider=new CActiveDataProvider('HsFormOnea', array(
				'criteria'=>array(
						'condition'=>'barangay_id=:barangayId',
						'params'=>array(':barangayId'=>$model->id),
				),
		));

and this one (filters the hsformonea from a barangay it is related to.)

*breakdown is like this Project Site -> City -> Barangay -> HsformOnea*

now this is my problem

i want a table (an html table or cgridview or datatable, it MUST be a table) and I want that table to make the city as its header and the content of that table is the Hsformonea

 <?php $this->widget('zii.widgets.CListView', array(
 'dataProvider'=>$cityDataProvider,
 'itemView'=>'/city/_viewCity',
 ));?>
 
  <?php $this->widget('zii.widgets.CListView', array(
 'dataProvider'=>$hsFormOneaDataProvider,
 'itemView'=>'/hsFormOnea/_view',
 ));?>

^ this is my code in the views

this is how i want it to look like


can anyone help me? i badly needed this one.