How to bring many rows to one row in dataTable

I am creating page using JSF 2.0 where I am displaying all images that are there. Code I used is:

<h:dataTable id="imageList3" value="#{PersonalInformationDataBean.loadReviewReportDataById()}" var="reviewMyList" width="100%" border="1">
    <h:column>
        <h:graphicImage 
        value="DisplayImage?mainID=reviewReport&amp;id=#{reviewMyList.drawingId}" 
        />
    </h:column>
</h:dataTable>

Currently this is displaying one image per row which is right. What I wanted to do is, display four images in 1 row. If there are 9 images that I should have output in below format and not 9 rows.

+++++++++++++++++++++++++++++++++++++++++
+ Image 1 + Image 2 + Image 3 + Image 4 +
+ Image 5 + Image 6 + Image 7 + Image 8 +
+ Image 9 +         +         +         +
+++++++++++++++++++++++++++++++++++++++++

Please let me know if this is unclear.

Solution

You can place four <h:column> with single h:graphicImage in each or four h:graphicImage in one <h:column>

well, you can modify your object (reviewMyList) to hold up to 3 inner objects which you will access inside each column like

reviewMyList.first.drawingId

reviewMyList.second.drawingId

reviewMyList.third.drawingId ,

ofcourse you will have to add

rendered="reviewMyList.first ne null"

rendered="reviewMyList.second ne null"

rendered="reviewMyList.third ne null" to your <h:graphicImage