How do I display data in horizontal orientation in JSF as repeater in Asp.Net?

I saw datatable component in JSF and it typically renders as table row by row. But what do I do if I want to display something not in vertica开发者_开发问答l orientation but in horizontal manner? Say, suppose I want to make a photo album so I need to be able to display rows of database table in column format.

Make use of another UIData based component wherein you have full control over the output, such as Facelets' ui:repeat, Tomahawk's t:dataList or RichFaces' rich:dataList or a4j:repeat.

E.g.

<ul>
    <ui:repeat items="#{bean.photos}" var="photo">
        <li><img src="#{photo.url}" alt="#{photo.title}" /></li>
    </ui:repeat>
</ul>

in combination with for example

li { 
    display: inline;
    list-style-type: none;
}

The t:dataList and rich:dataList can render <ul> and <li> for you. You just have to print the <img> (or h:graphicImage if you prefer that) and apply a shot of CSS.

Update: as a bonus and as horizontally scrolling the page is generally bad for UX, you'd like to make it a carousel. Just style the <ul> element as follows then:

ul {
    width: 500px; /* Just pick whatever width it needs to be. */
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: none;
}