title: Generate HTML like treegrid from XML with XSLT transformations
body: <p>I have to create html that looks like treegrid from a given XML.</p>
  
  <p>Example of treegrid:
  <a href="http://dhtmlx.com/docs/products/dhtmlxTreeGrid/index.shtml" rel="nofollow">TreeGrid</a></p>
  
  <p>My xslt is almost done, i just need to apply some margins to look like there are levels.</p>
  
  <p>The XML is:</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;rows&gt;
  
    &lt;row id="FOLDER1"&gt;
      &lt;cell image="blank.gif"&gt;Folder 1&lt;/cell&gt;
      &lt;cell&gt;&lt;/cell&gt;
      &lt;cell&gt;&lt;/cell&gt;
      &lt;cell&gt;&lt;/cell&gt;
      &lt;cell&gt;&lt;/cell&gt;
      &lt;cell&gt;&lt;/cell&gt;
      &lt;cell&gt;&lt;/cell&gt;
      &lt;cell sum="1"&gt;$23&lt;/cell&gt;
      &lt;row id="FOLDER2"&gt;
        &lt;cell image="blank.gif"&gt;Folder 2&lt;/cell&gt;
        &lt;cell&gt;&lt;/cell&gt;
        &lt;cell&gt;&lt;/cell&gt;
        &lt;cell&gt;&lt;/cell&gt;
        &lt;cell&gt;&lt;/cell&gt;
        &lt;cell&gt;&lt;/cell&gt;
        &lt;cell&gt;&lt;/cell&gt;
        &lt;cell sum="2"&gt;$11&lt;/cell&gt;
        &lt;row id="FOLDER3"&gt;
          &lt;cell image="blank.gif"&gt;Folder 3&lt;/cell&gt;
          &lt;cell&gt;&lt;/cell&gt;
          &lt;cell&gt;&lt;/cell&gt;
          &lt;cell&gt;&lt;/cell&gt;
          &lt;cell&gt;&lt;/cell&gt;
          &lt;cell&gt;&lt;/cell&gt;
          &lt;cell&gt;&lt;/cell&gt;
          &lt;cell sum="3"&gt;$44&lt;/cell&gt;
          &lt;row id="pro1"&gt;
            &lt;cell image="blank.gif"&gt;Product 1&lt;/cell&gt;
            &lt;cell&gt;324234&lt;/cell&gt;
            &lt;cell&gt;3.00&lt;/cell&gt;
            &lt;cell&gt;Kilo&lt;/cell&gt;
            &lt;cell&gt;1.00&lt;/cell&gt;
            &lt;cell&gt;No&lt;/cell&gt;
            &lt;cell&gt;€ 33.33&lt;/cell&gt;
            &lt;cell&gt;€ 33.33&lt;/cell&gt;
          &lt;/row&gt;
          &lt;row id="pro2"&gt;
            &lt;cell image="blank.gif"&gt;Product 2&lt;/cell&gt;
            &lt;cell&gt;4354354&lt;/cell&gt;
            &lt;cell&gt;1.00&lt;/cell&gt;
            &lt;cell&gt;Kilo&lt;/cell&gt;
            &lt;cell &gt;0.50&lt;/cell&gt;
            &lt;cell&gt;No&lt;/cell&gt;
            &lt;cell&gt;€ 2.53&lt;/cell&gt;
            &lt;cell&gt;€ 1.26&lt;/cell&gt;
          &lt;/row&gt;
  
        &lt;/row&gt;
        &lt;row id="pro3"&gt;
          &lt;cell image="blank.gif"&gt;Product 3&lt;/cell&gt;
          &lt;cell&gt;435436&lt;/cell&gt;
          &lt;cell&gt;10.00&lt;/cell&gt;
          &lt;cell&gt;Kilo&lt;/cell&gt;
          &lt;cell&gt;Yes&lt;/cell&gt;
          &lt;cell&gt;€ 0.36&lt;/cell&gt;
          &lt;cell&gt;€ 3.60&lt;/cell&gt;
        &lt;/row&gt;
  
      &lt;row id="pro4"&gt;
        &lt;cell image="blank.gif"&gt;Product 4&lt;/cell&gt;
        &lt;cell&gt;435435&lt;/cell&gt;
        &lt;cell&gt;3.28&lt;/cell&gt;
        &lt;cell&gt;Kilo&lt;/cell&gt;
        &lt;cell&gt;1.00&lt;/cell&gt;
        &lt;cell&gt;No&lt;/cell&gt;
        &lt;cell&gt;€ 17.38&lt;/cell&gt;
        &lt;cell&gt;€ 17.38&lt;/cell&gt;
      &lt;/row&gt;
      &lt;row id="NEWCAT_59"&gt;
          &lt;cell image="blank.gif"&gt;&amp;lt;strong&amp;gt;+ Add new category&amp;lt;/strong&amp;gt;&lt;/cell&gt;
        &lt;/row&gt;
        &lt;row id="NEWSEMING_59"&gt;
          &lt;cell image="blank.gif"&gt;&amp;lt;strong&amp;gt;+ Add new product&amp;lt;/strong&amp;gt;&lt;/cell&gt;
        &lt;/row&gt;
     &lt;/row&gt;
    &lt;/row&gt;
  
  &lt;/rows&gt;
  </code></pre>
  
  <p>The XSLT is:</p>
  
  <pre><code>&lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
      &lt;xsl:output method="html" indent="yes"/&gt;
      &lt;xsl:template match="/rows"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;th&gt;1&lt;/th&gt;
                  &lt;th&gt;2&lt;/th&gt;
                  &lt;th&gt;3&lt;/th&gt;
                  &lt;th&gt;4&lt;/th&gt;
                  &lt;th&gt;5&lt;/th&gt;
                  &lt;th&gt;6&lt;/th&gt;
                  &lt;th&gt;7&lt;/th&gt;
                  &lt;th&gt;8&lt;/th&gt;
              &lt;/tr&gt;
              &lt;xsl:apply-templates select="row"/&gt;
          &lt;/table&gt;
      &lt;/xsl:template&gt;
  
      &lt;xsl:template match="row"&gt;
          &lt;tr&gt;
              &lt;xsl:apply-templates select="cell"/&gt;
          &lt;/tr&gt;
          &lt;xsl:apply-templates select="row"/&gt;
      &lt;/xsl:template&gt;
  
      &lt;xsl:template match="cell"&gt;
  
          &lt;xsl:variable name="img" select="../@id"/&gt;
          &lt;xsl:variable name="cellvalue" select="."/&gt;
          &lt;xsl:variable name="cellattribute" select="./@image"&gt;&lt;/xsl:variable&gt;
  
          &lt;xsl:if test="$cellvalue!='&amp;lt;strong&amp;gt;+ Add new category&amp;lt;/strong&amp;gt;' and $cellvalue!='&amp;lt;strong&amp;gt;+ Add new product&amp;lt;/strong&amp;gt;' "&gt;
  
              &lt;td&gt;
               &lt;xsl:choose&gt;
  
              &lt;xsl:when test="starts-with($img, 'FOLDER') and $cellattribute='blank.gif'"&gt;
          &lt;img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif"&gt;&lt;/img&gt;
          &lt;xsl:value-of select="."/&gt;
              &lt;/xsl:when&gt;
  
              &lt;xsl:otherwise&gt;
                      &lt;div style="margin-left:20px;display: inline;"&gt;&lt;xsl:value-of select="."/&gt;&lt;/div&gt;
                      &lt;/xsl:otherwise&gt;
  
                &lt;/xsl:choose&gt;
              &lt;/td&gt;
  
          &lt;/xsl:if&gt;
      &lt;/xsl:template&gt;
  &lt;/xsl:stylesheet&gt;
  </code></pre>
  
  <p>Folder 2 is in Folder 1 and Folder 2 and Folder 3 are both in Folder 1.So i need cells from Folder 2 to be more to the right from the cells from Folder 1, and the same thing to apply for Folder 3 or any other Folders in the XML.</p>
  
  <p>Expected output:</p>
  
  <pre><code>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;table&gt;
      &lt;tbody&gt;&lt;tr&gt;
          &lt;th&gt;1&lt;/th&gt;
          &lt;th&gt;2&lt;/th&gt;
          &lt;th&gt;3&lt;/th&gt;
          &lt;th&gt;4&lt;/th&gt;
          &lt;th&gt;5&lt;/th&gt;
          &lt;th&gt;6&lt;/th&gt;
          &lt;th&gt;7&lt;/th&gt;
          &lt;th&gt;8&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif"&gt;Folder 1&lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;$23&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="
      margin-left: 20px;
  "&gt;Folder 2&lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;$11&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;img alt="neso" src="http://www.deporteandaluz.com/web/includes/dhtmlx/imgs/csh_winstyle/minus.gif" style="
      margin-left: 40px;
  "&gt;Folder 3&lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;$44&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div style="margin-left: 60px;display: inline;"&gt;Product 1&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;324234&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;3.00&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;Kilo&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;1.00&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;No&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;€ 33.33&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;€ 33.33&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div style="margin-left: 60px;display: inline;"&gt;Product 2&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;4354354&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;1.00&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;Kilo&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;0.50&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;No&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;€ 2.53&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;€ 1.26&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div style="margin-left: 40px;display: inline;"&gt;Product 3&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;435436&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;10.00&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;Kilo&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;Yes&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;€ 0.36&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;€ 3.60&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div style="margin-left: 40px;display: inline;"&gt;Product 4&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;435435&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;3.28&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;Kilo&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;1.00&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;No&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;€ 17.38&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div style="margin-left:20px;display: inline;"&gt;€ 17.38&lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;/tr&gt;&lt;tr&gt;
  &lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>