html_table

aideshizhe0 2022-01-20

展開全文

在 郵件報表 之類的開發(fā)任務(wù)中,，需要生成 HTML 表格,。

使用 Python 生成 HTML 表格基本沒啥難度， for 循環(huán)遍歷一遍數(shù)據(jù)并輸出標(biāo)簽即可,。如果需要實現(xiàn)合并單元格,，或者按需調(diào)整表格樣式，就比較麻煩了,。

這時,，可以試試本文的主角—— html-table 包，借助它可生成各種樣式的 HTML 表格,。接下來,，以一個簡單的例子演示 html-table 的常用用法：

開始之前，須通過 pip 安裝 html-table 包：

$ python -m pip install html-table

安裝完畢后,，即可導(dǎo)入 HTMLTable 類：

from HTMLTable import (
    HTMLTable,
)

創(chuàng)建一個新表格,，標(biāo)題為 果園收成表 ：

# 標(biāo)題
table = HTMLTable(caption='果園收成表')

附上表頭：

# 表頭行
table.append_header_rows((
    ('名稱',    '產(chǎn)量 (噸)',    '環(huán)比',             ''),
    ('',        '',             '增長量 (噸)',      '增長率 (%)'),
))

注意到，表頭分為兩行，有些單元格需要合并,，被合并的單元格需要留空占位,。

合并單元格設(shè)置：

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

table[0] 取出第一行，即第一個 <tr> 標(biāo)簽,； table[0][0] 取出第一個單元格,，對應(yīng) 名稱； table[0][0].attr 則是其標(biāo)簽 <th> 的屬性,。該單元格合并下方一個單元格,，需要將標(biāo)簽屬性 rowspan 設(shè)置為 2 。

接著,，加入數(shù)據(jù),，方法與表頭類似，總共有 3 行：

# 數(shù)據(jù)行
table.append_data_rows((
    ('荔枝', 11, 1, 10),
    ('芒果', 9, -1, -10),
    ('香蕉', 6, 1, 20),
))

至此,，數(shù)據(jù)準(zhǔn)備完畢,，可以著手調(diào)整樣式。先設(shè)置表格標(biāo)題樣式：

# 標(biāo)題樣式
table.caption.set_style({
    'font-size': '15px',
})

設(shè)置 <table> 標(biāo)簽的樣式：

# 表格樣式,，即<table>標(biāo)簽樣式
table.set_style({
    'border-collapse': 'collapse',

    'word-break': 'keep-all',
    'white-space': 'nowrap',
    'font-size': '14px',
})

以上 CSS 樣式設(shè)置在 <table> 標(biāo)簽上,，作用于整個表格，影響表格邊框,、字體大小等,。注意到，下面會覆蓋部分單元格(如表頭單元格)的字體大小,。

接著,，設(shè)置每個單元格的樣式，主要是規(guī)定邊框樣式：

# 統(tǒng)一設(shè)置所有單元格樣式,，<td>或<th>
table.set_cell_style({
    'border-color': '#000',
    'border-width': '1px',
    'border-style': 'solid',

    'padding': '5px',
})

接著,，設(shè)置表頭單元格樣式，規(guī)定顏色,、字體大小,、以及填充大小：

# 表頭樣式
table.set_header_row_style({
    'color': '#fff',
    'background-color': '#48a6fb',
    'font-size': '18px',
})
# 覆蓋表頭單元格字體樣式
table.set_header_cell_style({
    'padding': '15px',
})

set_header_row_style 將樣式設(shè)置到表頭兩個 <tr> 標(biāo)簽上,； set_header_cell_style 則將樣式設(shè)置到每個 <th> 標(biāo)簽上,。應(yīng)該盡量將顏色等樣式設(shè)置到 <tr> 標(biāo)簽上，而不是 <th> 標(biāo)簽上,，以生成精簡的 HTML ,。

將次級表頭字體大小調(diào)小，不再贅述：

# 調(diào)小次表頭字體大小
table[1].set_cell_style({
    'padding': '8px',
    'font-size': '15px',
})

遍歷每個數(shù)據(jù)行,，如果第 2 個單元格值小于 0 ,，設(shè)置樣式標(biāo)紅背景顏色：

# 遍歷數(shù)據(jù)行,，如果增長量為負，標(biāo)紅背景顏色
for row in table.iter_data_rows():
    if row[2].value < 0:
        row.set_style({
            'background-color': '#ffdddd',
        })

最后,，生成 HTML 文本：