title: Display table dynamically from multidimensional array
body: <p>all masters.
   I have an below array </p>
  
  <pre><code>Array
  (
      [1] =&gt; Array
          (
              [2] =&gt; Array
                  (
                      [0] =&gt; 11
                      [1] =&gt; 12
                      [2] =&gt; 13
                  )
  
              [3] =&gt; Array
                  (
                      [0] =&gt; 21
                  )
  
          )
  
      [2] =&gt; Array
          (
              [2] =&gt; Array
                  (
                      [0] =&gt; 11
                      [1] =&gt; 12
                      [2] =&gt; 13
                  )
  
              [3] =&gt; Array
                  (
                      [0] =&gt; 21
                  )
  
          )
  
      [3] =&gt; Array
          (
              [2] =&gt; Array
                  (
                      [0] =&gt; 11
                      [1] =&gt; 12
                      [2] =&gt; 13
                  )
  
              [3] =&gt; Array
                  (
                      [0] =&gt; 21
                  )
  
          )
  
  )
  </code></pre>
  
  <p>In above Array The first Node [1] is my color value. Inside it [2] is my size attribute and this value. in same child node their is [3] is my type attribute and its value. I want to display this in HTML Table format like this.
  1 2 3 should be goes into  according this below table will be display.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&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;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;11&lt;/td&gt;
      &lt;td&gt;21&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;12&lt;/td&gt;
      &lt;td&gt;21&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;13&lt;/td&gt;
      &lt;td&gt;21&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;11&lt;/td&gt;
      &lt;td&gt;21&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;12&lt;/td&gt;
      &lt;td&gt;21&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;2&lt;/td&gt;
      &lt;td&gt;13&lt;/td&gt;
      &lt;td&gt;21&lt;/td&gt;
    &lt;/tr&gt;
    
   &lt;/table&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>if their is no 3 node table will be display like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;1&lt;/th&gt;
          &lt;th&gt;2&lt;/th&gt;
       &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;11&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
         &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;13&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;11&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;12&lt;/td&gt;
         &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;13&lt;/td&gt;
        &lt;/tr&gt;
        
       &lt;/table&gt; </code></pre>
  </div>
  </div>
  </p>
  
  
  
  <p>Please Help me to achieve this.</p>