Sharepoint 2010 xslt dataview : modify table structure to display list item

Question

I have an image list to be display. Standard template in SharePoint, each item will be looping using xsl:for-each and display in a table as single row like sample below

 __________   
|          |  
|  image   |  
|__________|  
 __________   
|          |  
|  image   |  
|__________| 
 __________
|          |  
|  image   |  
|__________|  
 __________   
|          |  
|  image   |  
|__________|

simple code for this :

<xsl:for-each select="$Rows">
   <tr>
      <td><xsl:value-of ......./> </td>
   </tr>
</xsl:for-each>

what i need to do is to display 3 item in each row as sample below

 __________     __________     __________
|          |   |          |   |          |
|  image   |   |  image   |   |  image   |
|__________|   |__________|   |__________|
 __________     __________     __________
|          |   |          |   |          |
|  image   |   |  image   |   |  image   |
|__________|   |__________|   |__________|

How can I do this in xslt using looping.

Answer 1

I don't usually recommend using nested for-eaches in XSL, but in the interest of not monkeying with your XSLT too much, how about this:

<xsl:for-each select="$Rows[position() mod 3 = 1]">
   <tr>
      <!-- Select the (0-based) position within this iteration -->
      <xsl:variable name="i" select="position() - 1" />
      <xsl:for-each select="$Rows[(position() &gt; ($i * 3)) and
                                  (position() &lt;= (($i + 1) * 3))]">
         <td><xsl:value-of ......./> </td>
      </xsl:for-each>
   </tr>
</xsl:for-each>

Answer 2

Another way to do this is using <li> instead of table cells. This properly sets the presentation from the underlying data. With proper CSS, you can have the list items wrap depending on how much width is available for the webpart(?).

<style>
.imagelist li { float: left; }
</style>

then...

<ul class="imagelist">
<xsl:for-each select="$Rows">
      <li><xsl:value-of ......./> </li>
</xsl:for-each>
</ul>

of course, you may need to add a "width" style rule to the webpart/container of the list - which depends on the width of your images.