title: Generate table with images on javascript
body: <p>I want to create a button that produces a 3x3 HTML table meant for a card game, where each cell corresponds to one single image. For the time being, I'm mainly focusing on filling individual cells with a card number taken from an array element, using a step-by-step rationale. This is what the final result should look like in HTML, derived from the produced script;</p>
  
  <pre><code>&lt;table style="width:100%"&gt; 
      &lt;tr&gt; 
          &lt;td&gt;&lt;img src="1.png"&gt;&lt;/td&gt; 
          &lt;td&gt;&lt;img src="2.png"&gt;&lt;/td&gt; 
          &lt;td&gt;&lt;img src="3.png"&gt;&lt;/td&gt; 
      &lt;/tr&gt; 
      &lt;tr&gt; 
          &lt;td&gt;&lt;img src="4.png"&gt;&lt;/td&gt; 
          &lt;td&gt;&lt;img src="5.png"&gt;&lt;/td&gt; 
          &lt;td&gt;&lt;img src="6.png"&gt;&lt;/td&gt; 
      &lt;/tr&gt; 
      &lt;tr&gt; 
          &lt;td&gt;&lt;img src="7.png"&gt;&lt;/td&gt; 
          &lt;td&gt;&lt;img src="8.png"&gt;&lt;/td&gt; 
          &lt;td&gt;&lt;img src="9.png"&gt;&lt;/td&gt; 
      &lt;/tr&gt; 
  &lt;/table&gt;
  </code></pre>
  
  <p>This is what I'm currently working at, although with not much success</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;table id="1"&gt; 
  &lt;/table&gt;
  
  &lt;button onclick="createTable()"&gt;Create&lt;/button&gt;
  
  &lt;script&gt;
  function createTable() {
      var deck = [1,2,3,4,5,6,7,8,9];
  
      function shuffle(o) { //v1.0
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
      }
  
      shuffle(deck);
      document.getElementById("1").innerHTML = "&lt;tr&gt;&lt;td&gt;" + deck[0] + "&lt;/td&gt;&lt;td&gt;" + deck[1] + "&lt;/td&gt;&lt;td&gt;" + deck[2] + "&lt;/td&gt;&lt;/tr&gt;" +
      "&lt;tr&gt;&lt;td&gt;" + deck[3] + "&lt;/td&gt;&lt;td&gt;" + deck[4] + "&lt;/td&gt;&lt;td&gt;" + deck[5] + "&lt;/td&gt;&lt;/tr&gt;" +
      "&lt;tr&gt;&lt;td&gt;" + deck[6] + "&lt;/td&gt;&lt;td&gt;" + deck[7] + "&lt;/td&gt;&lt;td&gt;" + deck[8] + "&lt;/td&gt;&lt;/tr&gt;" +
      ;
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Note</strong>
  The 9-card deck is shuffled using a pretty basic and self-explanatory function.</p>
  
  <p><strong>Edit</strong>. My final version, which is returning broken image.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;table id="1"&gt; 
  &lt;/table&gt;
  
  &lt;button onclick="createTable()"&gt;Create&lt;/button&gt;
  
  &lt;script&gt;
  function createTable() {
      var deck = [1,2,3,4,5,6,7,8,9];
  
      function shuffle(o) {
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
      }
  
      shuffle(deck);
      document.getElementById("1").innerHTML = "&lt;tr&gt;&lt;td&gt;&lt;img src=" + deck[0] + ".png'&gt;&lt;/td&gt;&lt;td&gt;" + deck[1] + "&lt;/td&gt;&lt;td&gt;" + deck[2] + "&lt;/td&gt;&lt;/tr&gt;" +
      "&lt;tr&gt;&lt;td&gt;" + deck[3] + "&lt;/td&gt;&lt;td&gt;" + deck[4] + "&lt;/td&gt;&lt;td&gt;" + deck[5] + "&lt;/td&gt;&lt;/tr&gt;" +
      "&lt;tr&gt;&lt;td&gt;" + deck[6] + "&lt;/td&gt;&lt;td&gt;" + deck[7] + "&lt;/td&gt;&lt;td&gt;" + deck[8] + "&lt;/td&gt;&lt;/tr&gt;"
      ;
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>