title: How to build an HTML table using a for loop in Flask?
body: <p>I am trying to create a table on a webpage using python and flask. I have two lists, <code>testing_sketches</code> and <code>split_reconstructions</code>.</p>
  <p><code>testing_sketches</code>: It is a list of size 14, containing 14 image addresses.</p>
  <p><code>split_reconstructions</code>: It is a list of lists containing 14 lists of length 20. Basically, there are 20 image addresses corresponding to each of the 14 images in the previous list. This means it includes 20 image addresses for each image address in <code>testing_sketches</code>.</p>
  <p>I am trying to iteratively take an image from <code>testing_sketches</code> and display its 20 images in <code>split_reconstructions</code> on its right. Something like the following:</p>
  <p><a href="https://i.stack.imgur.com/qLVbM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qLVbM.png" alt="enter image description here" /></a></p>
  <p>And I have tried to implement it using the following code:</p>
  <pre><code>&lt;body&gt;        
      &lt;h2 style=&quot;margin-left: 1.5%;&quot;&gt;Iterative Reconstructions&lt;/h2&gt;
      {% for i in range(len(testing_sketches)) %}
              &lt;br&gt;
              &lt;br&gt;
              &lt;h3 style=&quot;margin-left: 10%;&quot;&gt;{{ i+1 }}.&lt;/h3&gt;
              &lt;center&gt;&lt;table border=&quot;1&quot;&gt;
              &lt;COLGROUP&gt;
              &lt;COL width=&quot;100&quot;&gt;&lt;COL width=&quot;100&quot;&gt;
              &lt;THEAD&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;center&gt;&lt;b&gt;Image&lt;b&gt;&lt;/center&gt;&lt;a href={{  testing_sketches[i] }} title=&quot;Input&quot; class=&quot;thickbox&quot;&gt;&lt;img src={{  testing_sketches[i] }} alt=&quot;Sorry, No Display!&quot; border=&quot;0&quot;/&gt;&lt;/a&gt;&lt;/td&gt;
                  {% for j in range(20) %}
                  &lt;td&gt;&lt;center&gt;&lt;b&gt;Reconstruction-{{ j }}&lt;b&gt;&lt;/center&gt;&lt;a href={{  split_reconstructions[i][j] }} title=&quot;Reconstructed-{{ iter_count }}&quot; class=&quot;thickbox&quot;&gt;&lt;img src={{  split_reconstructions[i][j] }} alt=&quot;Sorry, No Display!&quot; border=&quot;0&quot;/&gt;&lt;/a&gt;&lt;/td&gt;
                  {% endfor %}
              &lt;/tr&gt;
              &lt;/table&gt;&lt;/center&gt;
      {% endfor %}   
      
  &lt;/body&gt;
  </code></pre>
  <p>But this results in a blank result, no alternate display, no error, just an empty result. I have tried to check the length of the lists that I am passing on, and all of them are non-empty and have correct image addresses of the form: <code>static/test_reconstructions/images/image_04666_img.png</code> (an example of one of the addresses)</p>
  <p>I pass the lists and the functions used in the <code>app.py</code> file as follows:</p>
  <pre><code>@app.route('/')
  def home():
  
      return render_template('iterative_reconst.html', testing_sketchs=testing_sketchs, split_reconstructions=split_reconstructions, 
      len=len, range=range)
  </code></pre>