V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
推荐学习书目
Learn Python the Hard Way
Python Sites
PyPI - Python Package Index
http://diveintopython.org/toc/index.html
Pocoo
值得关注的项目
PyPy
Celery
Jinja2
Read the Docs
gevent
pyenv
virtualenv
Stackless Python
Beautiful Soup
结巴中文分词
Green Unicorn
Sentry
Shovel
Pyflakes
pytest
Python 编程
pep8 Checker
Styles
PEP 8
Google Python Style Guide
Code Style from The Hitchhiker's Guide
Fasion
V2EX  ›  Python

用 Python 生成 HTML 表格

  •  
  •   Fasion · Mar 18, 2020 · 3488 views
    This topic created in 2237 days ago, the information mentioned may be changed or developed.

    邮件报表 之类的开发任务中,需要生成 HTML 表格。

    使用 Python 生成 HTML 表格基本没啥难度, for 循环遍历一遍数据并输出标签即可。 如果需要实现合并单元格,或者按需调整表格样式,就比较麻烦了。

    这时,可以试试本文的主角 —— html-table 包,借助它可生成各种样式的 HTML 表格。 接下来,以一个简单的例子演示 html-table 的常用用法:

    表格效果图

    开始之前,须通过 pip 安装 html-table 包:

    $ python -m pip install html-table
    

    安装完毕后,即可导入 HTMLTable 类:

    from HTMLTable import (
        HTMLTable,
    )
    

    创建一个新表格,标题为 果园收成表

    # 标题
    table = HTMLTable(caption='果园收成表')
    

    附上表头:

    # 表头行
    table.append_header_rows((
        ('名称',    '产量 (吨)',    '环比',             ''),
        ('',        '',             '增长量 (吨)',      '增长率 (%)'),
    ))
    

    注意到,表头分为两行,有些单元格需要合并,被合并的单元格需要留空占位。

    合并单元格设置:

    # 合并单元格
    table[0][0].attr.rowspan = 2
    table[0][1].attr.rowspan = 2
    table[0][2].attr.colspan = 2
    

    table[0] 取出第一行,即第一个 <tr> 标签; table[0][0] 取出第一个单元格,对应 名称table[0][0].attr 则是其标签 <th> 的属性。 该单元格合并下方一个单元格,需要将标签属性 rowspan 设置为 2

    接着,加入数据,方法与表头类似,总共有 3 行:

    # 数据行
    table.append_data_rows((
        ('荔枝', 11, 1, 10),
        ('芒果', 9, -1, -10),
        ('香蕉', 6, 1, 20),
    ))
    

    至此,数据准备完毕,可以着手调整样式。先设置表格标题样式:

    # 标题样式
    table.caption.set_style({
        'font-size': '15px',
    })
    

    设置 <table> 标签的样式:

    # 表格样式,即<table>标签样式
    table.set_style({
        'border-collapse': 'collapse',
        'word-break': 'keep-all',
        'white-space': 'nowrap',
        'font-size': '14px',
    })
    

    以上 CSS 样式设置在 <table> 标签上,作用于整个表格,影响表格边框、字体大小等。 注意到,下面会覆盖部分单元格(如表头单元格)的字体大小。

    接着,设置每个单元格的样式,主要是规定边框样式:

    # 统一设置所有单元格样式,<td>或<th>
    table.set_cell_style({
        'border-color': '#000',
        'border-width': '1px',
        'border-style': 'solid',
        'padding': '5px',
    })
    

    接着,设置表头单元格样式,规定颜色、字体大小、以及填充大小:

    # 表头样式
    table.set_header_row_style({
        'color': '#fff',
        'background-color': '#48a6fb',
        'font-size': '18px',
    })
    
    # 覆盖表头单元格字体样式
    table.set_header_cell_style({
        'padding': '15px',
    })
    

    set_header_row_style 将样式设置到表头两个 <tr> 标签上; set_header_cell_style 则将样式设置到每个 <th> 标签上。 应该尽量将颜色等样式设置到 <tr> 标签上,而不是 <th> 标签上,以精简生成的 HTML

    将次级表头字体大小调小,不再赘述:

    # 调小次表头字体大小
    table[1].set_cell_style({
        'padding': '8px',
        'font-size': '15px',
    })
    

    遍历每个数据行,如果第 2 个单元格值小于 0 ,设置样式标红背景颜色:

    # 遍历数据行,如果增长量为负,标红背景颜色
    for row in table.iter_data_rows():
        if row[2].value < 0:
            row.set_style({
                'background-color': '#ffdddd',
            })
    

    最后,生成 HTML 文本:

    html = table.to_html()
    print(html)
    

    附录

    更多 Python 技术文章,请查看:Python 语言小册 ,转至 原文 可获得最佳阅读体验。

    订阅更新,获取更多学习资料,请关注我们的 微信公众号

    小菜学编程

    6 replies    2020-03-19 12:53:00 +08:00
    hxysnail
        1
    hxysnail  
       Mar 18, 2020
    学习了,写得很好
    TypeErrorNone
        2
    TypeErrorNone  
       Mar 18, 2020
    有意思
    为何不直接通过传值到 html 模板里来实现,这样 html 模板文件独立出来,可以随意修改
    Fasion
        3
    Fasion  
    OP
       Mar 18, 2020
    @TypeErrorNone 对哦,模板也是一个思路,等我有空也试试
    qazwsxkevin
        4
    qazwsxkevin  
       Mar 19, 2020
    这个挺好,谢谢楼主,学习了!

    @TypeErrorNone,批量传值到模板生成的例子有传送门吗?
    solider245
        5
    solider245  
       Mar 19, 2020
    @qazwsxkevin 同求这个
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   964 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 50ms · UTC 18:11 · PVG 02:11 · LAX 11:11 · JFK 14:11
    ♥ Do have faith in what you're doing.