My XML file is currently being transformed using XSLT to display tables, but I would like these tables to be displayed next to each other in rows of three columns. However, the current output shows them displaying one after another vertically.
Here's the example of the XML data:
<Result>
<DressPrice>
<Name>Dress 2</Name>
<Price>20</Price>
<Image>2.jpg</Image>
</DressPrice>
<DressPrice>
<Name>Dress 9</Name>
<Price>20</Price>
<Image>9.jpg</Image>
</DressPrice>
<DressPrice>
<Name>Dress 10</Name>
<Price>20</Price>
<Image>10.jpg</Image>
</DressPrice>
<DressPrice>
<Name>Dress 11</Name>
<Price>20</Price>
<Image>11.jpg</Image>
</DressPrice>
<DressPrice>
<Name>Dress 12</Name>
<Price>20</Price>
<Image>12.jpg</Image>
</DressPrice>
</Result>
The XSLT code used for transformation:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:strip-space elements="*" />
<xsl:template match="/">
<html>
<head><title>Dresses Per Price</title>
<link rel="stylesheet" type="text/css" href="price.css"/>
</head>
<body>
<h3>Dresses Per Price Displayed</h3>
<table>
<thead>
<tr style="background-color:PaleGreen;"></tr>
<tr></tr>
</thead>
<tbody>
<xsl:for-each select="Result">
<xsl:apply-templates>
<xsl:sort select="Name" data-type="text" order="ascending"/>
</xsl:apply-templates>
</xsl:for-each>
</tbody>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="DressPrice">
<xsl:variable name="cssClass">
<xsl:choose>
<xsl:when test="position() mod 2 = 0">coloured</xsl:when>
<xsl:otherwise>normal</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<table>
<tr>
<xsl:apply-templates select="Image"/>
</tr>
</table>
<table width="300px" style="text-align:center;">
<tr style="font-family:Gisha; font-size:15px; color:black;" width="100px" colspan="2"> <xsl:apply-templates select="Name"/></tr>
</table>
<table width="300px" style="text-align:center;">
<tr style="font-family:Gisha; font-size:15px; color:black;"><xsl:apply-templates select="Price"/>
</tr>
</table>
</xsl:template>
<xsl:template match="Image"> <!--To display image-->
<td style="border: 2px solid black;"><img src="{.}" width="350px"/></td>
</xsl:template>
<xsl:template match="Price">
<td style="width:100px;">$<xsl:value-of select="text()"/></td>
</xsl:template>
<xsl:template match="Name">
<td style="width:100px;"><xsl:value-of select="text()"/></td>
</xsl:template>
</xsl:stylesheet>
I am looking for a solution or guidance on how to modify the XSLT code to display three sets of information (image, description, and price) per row instead of appearing sequentially.