Django：如何在HTML中水平规整展示租赁列表并合理排版

云上老周

2026-8-5

问题描述

本人并非IT从业者，正在制作个人租赁追踪网站，用于查看未缴租金的租户。现有CSV文件rentals.txt，包含字段：序列号、姓名、地址、年龄、月租金、未缴月数、未缴总额。

已尝试用以下Django代码展示数据，但当前列表排版混乱未对齐，希望实现带表头（SN、NAME、ADDRESS等）的规整表格布局（含操作按钮），求技术指导及相关教程。

现有代码

HTML模板（main.html）

<h1>RENT {% for dt in data %} <p> {{ dt }} </p> {% endfor %} </h1>

views.py代码

out = [] * 4
count = 0
rental_list = open('rent/static/rentals.txt', 'r')
while True:
    line = rental_list.readline()
    if not line:
        break
    display = line.replace(',', '      ')
    if not count == 0:
        out.append(display)
    count += 1
rental_list.close()
return render(request, 'main.html', {'data' : out})

解决方案指导

1. 规范处理CSV数据

不要用字符串替换逗号的方式处理CSV，用Python内置的csv模块解析，能准确拆分每个字段，避免排版错位。修改views.py：

import csv
from django.shortcuts import render

def rental_list(request):
    # 定义表头对应字段
    headers = ['SN', 'NAME', 'ADDRESS', 'AGE', 'MONTHLY_RENT', 'UNPAID_MONTHS', 'TOTAL_UNPAID']
    rows = []
    
    # 读取并解析CSV文件
    with open('rent/static/rentals.txt', 'r', newline='', encoding='utf-8') as f:
        reader = csv.reader(f)
        next(reader)  # 跳过文件自带的表头（如果文件第一行是表头的话）
        for row in reader:
            # 把每行数据打包成字典，方便模板调用
            rows.append(dict(zip(headers, row)))
    
    return render(request, 'main.html', {'headers': headers, 'rows': rows})

注：如果你的CSV文件第一行不是表头，就删掉next(reader)这一行

2. 修改HTML模板生成规整表格

用HTML的<table>标签构建表格，每个字段对应一个单元格，自然对齐：

<h1>RENTAL TRACKER</h1>
<table border="1" cellpadding="8" cellspacing="0">
    <!-- 表头行 -->
    <tr>
        {% for header in headers %}
            <th>{{ header }}</th>
        {% endfor %}
        <th>操作</th> <!-- 操作按钮列 -->
    </tr>
    <!-- 数据行 -->
    {% for row in rows %}
        <tr>
            <td>{{ row.SN }}</td>
            <td>{{ row.NAME }}</td>
            <td>{{ row.ADDRESS }}</td>
            <td>{{ row.AGE }}</td>
            <td>{{ row.MONTHLY_RENT }}</td>
            <td>{{ row.UNPAID_MONTHS }}</td>
            <td>{{ row.TOTAL_UNPAID }}</td>
            <td>
                <!-- 示例操作按钮，可根据需求修改 -->
                <button>标记已缴</button>
                <button>编辑</button>
            </td>
        </tr>
    {% endfor %}
</table>

3. 优化表格样式（可选）

添加简单CSS让表格更美观，在HTML里加入：

<style>
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}
tr:hover {
    background-color: #f5f5f5;
}
button {
    margin-right: 5px;
    padding: 6px 12px;
    cursor: pointer;
}
</style>

4. 操作按钮功能实现（基础思路）

如果要让按钮真正生效，比如标记已缴：

给按钮加onclick事件，跳转到处理视图（比如/mark-paid/{{ row.SN }}）
在urls.py里配置对应路由
编写对应的视图函数处理更新逻辑（比如修改CSV文件，后续建议改用数据库存储数据）

Django：如何在HTML中水平规整展示租赁列表并合理排版

现有代码 #

HTML模板（main.html） #

views.py代码 #

1. 规范处理CSV数据 #

2. 修改HTML模板生成规整表格 #

3. 优化表格样式（可选） #

4. 操作按钮功能实现（基础思路） #