Horizontally fill an N column HTML table in XML/XSL

Question

I am trying to get a product page up but having trouble getting the items in a table that fills horizontally rather than the downward list I have now. I'm sure there are better solutions to XML/XSL but this is what I have to use for this project (and is my first time using it).

I would ideally like to have 4 different products in each row but can so far only get them to repeat the same one 4 times. I've searched for some command to force it to move to the next but can only find bits in JavaScript.

I'm sure there must be an easy solution or something I'm missing, can anyone help please?

XML (cut down version):

<catalog>
  <item>
    <category main="Christmas" sub="Christmas Gifts" sub2="Stocking Fillers" />
    <title>Festive food Christmas stickers</title>
    <sku>00530401</sku>
    <image>images/products/stickers.jpg</image>
    <price>1.50</price>
    <link>festive-stickers.html</link>
  </item>
  <item>
    <category main="Christmas" sub="Christmas Gifts" sub2="Stocking Fillers" />
    <title>Santa egg cup and toast cutter set</title>
    <sku>00531358</sku>
    <image>images/products/eggcup.jpg</image>
    <price>7.00</price>
    <link>santa-egg-cup.html</link>
  </item>
  <item>
    <category main="Christmas" sub="Christmas Gifts" sub2="Stocking Fillers" />
    <title>Mini snow globes - set of 3</title>
    <sku>00531522</sku>
    <image>images/products/globes.jpg</image>
    <price>9.00</price>
    <link>snowglobes.html</link>
  </item>
  <item>
    <category main="Christmas" sub="Christmas Gifts" sub2="Stocking Fillers" />
    <title>Spironauts hot water bottle</title>
    <sku>00530456</sku>
    <image>images/products/water-bottle.jpg</image>
    <price>8.75</price>
    <link>water-bottle.html</link>
  </item>
</catalog>

Here is the table part of my code:

<table border="1">
  <xsl:for-each select="catalog/item">
    <tr>
      <td style="width:25%; text-align:center;">
        <a href="{link}" title="{title}">
          <img src="{image}" alt="{title}" height="140" align="left" />
        </a>
      </td>
    </tr>
    <tr>
      <td style="width:25%; text-align:left;">
        <a href="{link}" title="{title}">
          <xsl:value-of select="title" />
        </a>
      </td>
      <td style="width:25%; text-align:left;">Add to basket</td>
    </tr>
    <tr>
      <td style="width:25%; text-align:left; font-weight:bold;">
        <xsl:value-of select="price" />
      </td>
    </tr>
  </xsl:for-each>
</table>