如何用Jinja模板在HTML中将两个Python列表渲染为两列表格

你写的代码跑不通、出不来想要的效果，核心是两个问题：

• 循环逻辑完全错了：你把for循环写在了<tr>行标签里面，相当于要把第一个列表所有数字全塞到第一行，第二个列表所有字母全塞到第二行，最后出来是两行各7列的表格，和你要的7行各2列的效果正好反过来。
• 模板语法写错了：你写了两个for循环，只加了一个{% endfor %}，而且闭合位置不对，直接渲染会报语法错误，生成的HTML标签也是残缺的。

两种常用方案都可以实现需求，优先推荐第一种，逻辑更清晰、后续更好维护。

方案1：后端打包数据后传入模板（推荐） #

在Python后端用内置的zip()函数，把两个列表对应位置的元素打包成元组序列，再传入模板，模板里直接循环每一行输出即可。
后端代码示例（以Flask为例，Django、FastAPI等其他框架逻辑一致）：

list_1 = [1, 2, 3, 4, 5, 6, 7]
list_2 = ["A", "B", "C", "D", "E", "F", "G"]
# 打包后每一项是 (数字, 对应字母) 的元组
table_rows = zip(list_1, list_2)
# 渲染模板时传入打包好的table_rows即可
return render_template("your_template.html", table_rows=table_rows)

对应模板代码：

<div class="tableFixHead">
  <table id="data">
    <!-- 如需表头可以自行添加，示例：<tr><th>数字列</th><th>字母列</th></tr> -->
    {% for num, alp in table_rows %}
    <tr>
      <td>{{ num }}</td>
      <td>{{ alp }}</td>
    </tr>
    {% endfor %}
  </table>
</div>

方案2：模板内通过索引匹配取值 #

如果不想修改后端传参逻辑，且确认两个列表长度完全一致，可以直接在模板循环时通过Jinja内置的循环索引，取第二个列表对应位置的元素。
不需要修改后端代码，直接替换模板部分即可：

<div class="tableFixHead">
  <table id="data">
    {% for num in list_1 %}
    <tr>
      <td>{{ num }}</td>
      <!-- loop.index0是Jinja内置的循环索引，从0开始计数，和Python列表索引规则一致 -->
      <td>{{ list_2[loop.index0] }}</td>
    </tr>
    {% endfor %}
  </table>
</div>

• 如果两个列表长度不一致，zip()方法会自动以更短的列表长度为准截断数据；如果用索引取值的方法，更短的列表会触发索引越界错误，建议提前在后端对齐两个列表的长度。
• 写Jinja模板时要注意标签嵌套规则：如果要生成多行表格，要把<tr>标签放在for循环内部，保证每次循环生成一个完整的行结构。

内容的提问来源于stack exchange，提问作者Mohanraj