动态生成可变长度的 HTML 表格（Flask 教程）

本文介绍如何在 flask 中基于数据库查询结果自动渲染任意行数的 html 表格，无需手动编写重复标签，通过 jinja2 模板引擎实现数据驱动的表格生成。

在 Web 开发中，将数据库查询结果（如 50 行、500 行甚至更多）以表格形式展示在网页上，是常见需求。手动为每行写

显然不可扩展，也不符合现代 Web 开发实践。Flask 内置的 Jinja2 模板引擎正是为此类动态内容而设计——它支持逻辑控制、循环与变量插值，能轻松将 python 数据结构（如列表、字典）映射为 html 结构。

✅ 核心实现三步法

1. 后端：查询数据并传入模板
   在 Flask 路由中，使用 SQLAlchemy、sqlite3 或其他数据库驱动获取数据，并以列表形式（如 list[dict]）传递给模板：

from flask import Flask, render_template import sqlite3  app = Flask(__name__)  @app.route('/') def show_table():     # 示例：从 SQLite 查询所有用户     conn = sqlite3.connect('example.db')     conn.row_factory = sqlite3.Row  # 支持按列名访问     cur = conn.cursor()     cur.execute("SELECT id, name, age FROM users")     rows = [dict(row) for row in cur.fetchall()]  # 转为字典列表，便于模板使用     conn.close()      return render_template('table.html', rows=rows)

2. 前端：Jinja2 模板中动态渲染表格
   在 templates/table.html 中，使用 {% for %} 循环遍历 rows，自动生成
   和
   。表头（ ）固定定义，内容区（ ）由数据驱动：

                      
   用户数据表（共 {{ rows|length }} 条记录）
                     {% if rows %}                 {% for row in rows %}                                  {% endfor %}             {% else %}                              {% endif %}         
            
                
                    
   ID
                    
   姓名
                    
   年龄
                
            
            
                        
   {{ row.id }}
                        
   {{ row.name | default('N/A') }}
                        
   {{ row.age or '未知' }}
                    
                        
   暂无数据
                    
        
     

   ? 提示：{{ row.name | default(‘N/A’) }} 使用 Jinja2 过滤器处理可能的空值，增强健壮性；colspan=”3″ 确保空状态提示横跨全部列。

   3. 进阶建议（可选但推荐）
   • ✅ 分页优化：若数据量极大（如上万行），应在后端加 LIMIT/OFFSET 或使用 paginate()（SQLAlchemy），避免前端卡顿；
   • ✅ 响应式支持：为表格添加 overflow-x: auto 容器或使用 bootstrap 表格类提升移动端体验；
   • ✅ 安全防护：Jinja2 默认转义变量输出（防止 xss），但若需渲染 HTML 内容，请显式使用 |safe 过滤器，并确保来源可信。

   ✅ 总结

   Flask + Jinja2 的组合让「数据库 → 动态表格」变得简洁可靠：你只需关注数据获取逻辑与模板结构，无需手写千行 HTML。只要数据以标准 Python 容器（如 list[dict]）形式传入，Jinja2 就能高效、安全、可读地完成渲染。这是服务端动态网页开发的标准范式，也是 Flask “轻量但完整” 设计哲学的典型体现。