Flask表格靠左留白|极客笔记

Flask表格靠左留白

在网页开发中，表格是一种常见的展示数据的方式。而在使用Flask框架进行网页开发时，我们经常需要在网页中显示一些表格数据。在这个过程中，我们可能会遇到需要让表格内容靠左对齐，并且让表格左侧留出一定的空白的需求。本文将详细介绍如何在Flask中实现表格靠左留白的效果。

什么是Flask

Flask是一个使用Python编写的轻量级Web应用框架。它基于Werkzeug WSGI工具箱和Jinja2模板引擎。Flask使用简单并且灵活，适合用来快速开发Web应用程序。

在Flask中创建一个简单的表格

在Flask中创建一个简单的表格非常简单，我们可以使用Jinja2模板引擎来渲染表格数据。下面是一个简单的示例代码，展示了如何在Flask中创建一个包含姓名和年龄的表格：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    data = [
        {'name': 'Alice', 'age': 25},
        {'name': 'Bob', 'age': 30},
        {'name': 'Cathy', 'age': 35}
    ]
    return render_template('index.html', data=data)

if __name__ == '__main__':
    app.run(debug=True)

在上面的代码中，我们定义了一个包含3个字典的列表data，每个字典包含name和age两个键值对。然后在index视图函数中将data传递给模板文件index.html进行渲染。

在模板文件中渲染表格数据

接下来，我们需要在模板文件index.html中渲染表格数据。下面是index.html的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Flask Table Left Padding</title>
</head>
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        {% for item in data %}
        <tr>
            <td>{{ item['name'] }}</td>
            <td>{{ item['age'] }}</td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>

在上面的代码中，我们使用了Jinja2模板语言的{% for %}循环来遍历data列表，并渲染每个字典中的name和age数据到表格中。

给表格添加靠左留白

为了让表格内容靠左对齐，并且让表格左侧留出一定的空白，我们可以使用CSS样式来实现。下面是一个简单的CSS样式代码片段，用于添加表格靠左留白的效果：

table {
    border-collapse: collapse;
    width: 100%;
}

table td, table th {
    padding: 10px;
}

table th {
    background-color: lightgray;
}

table td {
    text-align: left;
}

在上面的CSS代码中，我们给表格的td和th元素添加了padding属性，使内容向内缩进，同时指定了text-align: left;让表格内容左对齐。如果需要表格左侧留出更多的空白，可以适当增加padding的值。