title: Want to create a table using XSL/XML
body: <p>I’m trying to create a table using XSL/XML. I'm new to XSL and XML, so go easy on me please 
  I’m having a bit of trouble with a few things.
  This is my XML file:</p>
  
  <pre><code>&lt;List&gt;
  &lt;Classification&gt;
      &lt;Class&gt;
          &lt;Label&gt;Milk&lt;/Label&gt;
          &lt;NumberZone&gt;1&lt;/NumberZone&gt;
  
          &lt;Zone&gt;
              &lt;Label&gt;Milk1&lt;/Label&gt;
              &lt;Frontier&gt;500&lt;/Frontier&gt;
          &lt;/Zone&gt;
  
          &lt;Zone&gt;
              &lt;Label&gt;Milk2&lt;/Label&gt;
              &lt;Frontier&gt;600&lt;/Frontier&gt;
          &lt;/Zone&gt;
  
          &lt;Zone&gt;
              &lt;Label&gt;Milk3&lt;/Label&gt;
              &lt;Frontier&gt;600&lt;/Frontier&gt;
          &lt;/Zone&gt;
  
          &lt;Zone&gt;
              &lt;Label&gt;Milk4&lt;/Label&gt;
              &lt;Frontier&gt;700&lt;/Frontier&gt;
          &lt;/Zone&gt;
  
          &lt;image&gt;
              &lt;File&gt;milk.jpg&lt;/File&gt;
          &lt;/image&gt;
      &lt;/Class&gt;
  
      &lt;Class&gt;
          &lt;Label&gt;Water&lt;/Label&gt;
          &lt;NumberZone&gt;2&lt;/NumberZone&gt;
  
          &lt;Zone&gt;
              &lt;Label&gt;Water1&lt;/Label&gt;
              &lt;Frontier&gt;800&lt;/Frontier&gt;
          &lt;/Zone&gt;
  
          &lt;Zone&gt;
              &lt;Label&gt;Water2&lt;/Label&gt;
              &lt;Frontier&gt;900&lt;/Frontier&gt;
          &lt;/Zone&gt;
  
          &lt;image&gt;
              &lt;File&gt;water.jpg&lt;/File&gt;
          &lt;/image&gt;
      &lt;/Class&gt;
  
      &lt;Class&gt;
          &lt;Label&gt;Juice&lt;/Label&gt;
          &lt;NumberZone&gt;3&lt;/NumberZone&gt;
  
          &lt;Zone&gt;
              &lt;Label&gt;Juice1&lt;/Label&gt;
              &lt;Frontier&gt;950&lt;/Frontier&gt;
          &lt;/Zone&gt;
  
          &lt;Zone&gt;
              &lt;Label&gt;Juice2&lt;/Label&gt;
              &lt;Frontier&gt;990&lt;/Frontier&gt;
          &lt;/Zone&gt;
  
          &lt;image&gt;
              &lt;File&gt;juice.jpg&lt;/File&gt;
          &lt;/image&gt;
      &lt;/Class&gt;
  
  &lt;/Classification&gt;
  &lt;/List&gt;
  </code></pre>
  
  <p>It normally is longer, but I cut out some parts.</p>
  
  <p>I want my table to look like this:</p>
  
  <ul>
  <li>First column: Milk, Water, Juice...</li>
  <li>Second column: I want the images.</li>
  <li>Third column: Milk1, Water1, Juice1. </li>
  <li>Fourth column: Milk2, Water2, Juice2.</li>
  <li>(And so on).</li>
  </ul>
  
  <p>So far I have this:</p>
  
  <pre><code>&lt;table border="1"&gt;
  
   &lt;tr&gt;&lt;th&gt;Column 1&lt;/th&gt;&lt;th&gt;Image&lt;/th&gt;&lt;th&gt;Column 3&lt;/th&gt;&lt;/tr&gt;
  
  
          &lt;xsl:for-each select="Classification/Class"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;em&gt;&lt;xsl:value-of select="Label" /&gt;&lt;/em&gt;&lt;/td&gt;
  
              &lt;td&gt;
              &lt;xsl:attribute name="src"&gt;
              &lt;xsl:value-of select="image/File"/&gt;
              &lt;/xsl:attribute&gt;
              &lt;/td&gt;
  
              &lt;td&gt;&lt;xsl:value-of select="Zone/Label"/&gt;&lt;/td&gt;
              &lt;td colspan="1"&gt;&lt;xsl:value-of select="Zone/Label"/&gt;&lt;/td&gt;
              &lt;td colspan="1"&gt;&lt;xsl:value-of select="Zone/Label"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/xsl:for-each&gt;
  &lt;/table&gt;
  </code></pre>
  
  <ul>
  <li>This displays the first column perfectly with Milk, Water, and Juice.</li>
  <li>The second column doesn't work, it's just blank. The image won't appear in the table, any idea on how to fix this?*</li>
  <li>The third column also works perfectly showing Milk1, Water1, Juice1.</li>
  <li>The fourth column doesn't work, obviously, because I'm using the same value-of as in the third column. I don't know how to get Milk2, Water2, and Juice2 to show in that column, since it uses the same element name (being Zone/Label)</li>
  </ul>
  
  <p><strong>So there's two thing I need to fix: I need to fix the second column to actually show the image in each boxes.
  I also need to fix the fourth column to show Milk2, Water2, and Juice2.
  My main problem for now is to get the fourth column to work, I really don't understand how to display Milk2, Water2, etc.</strong></p>
  
  <p>I would also like to add either radio buttons, or check boxes later on in each cell, so I could use JavaScript in my web page. I feel like each box would need a different ID, so I'm not sure how to achieve that using XSL, since it just does a "loop" through the XML file, so I'm not sure how I would add a radio button, or a check box in each cell. * This isn't as important for now, I'll work on that after I'd rather have help with what I mentioned before, but this would be helpful too.</p>
  
  <p>EDIT:</p>
  
  <p>I have two problems.
  I managed to add check boxes by doing something like this:</p>
  
  <pre><code>&lt;td colspan="1"&gt;&lt;input type="checkbox" name="Zone1" id="Zone1" /&gt;&lt;xsl:value-of select="Zone[1]/Label"/&gt;&lt;/td&gt;
  &lt;td colspan="1"&gt;&lt;input type="checkbox" name="Zone2" id="Zone1" /&gt;&lt;xsl:value-of select="Zone[2]/Label"/&gt;&lt;/td&gt;
  &lt;td colspan="1"&gt;&lt;input type="checkbox" name="Zone3" id="Zone1"/&gt; &lt;xsl:value-of select="Zone[3]/Label"/&gt;&lt;/td&gt;
  &lt;td colspan="1"&gt;&lt;input type="checkbox" name="Zone4" id="Zone1" /&gt;&lt;xsl:value-of select="Zone[4]/Label"/&gt;&lt;/td&gt;
  </code></pre>
  
  <p>The problem is, I think every elements in each column will have the same ID, am I right? How do I change it so they all have a different ID?</p>
  
  <p>Also, it can't be seen from the XML file in my question, but later on there would only be, for example, Milk4. meaning I would want the cells for Water4 and Juice4 to dissapear completely, but it's still there, empty with a check box.</p>