当我们有专门为此目的设计的特殊方法时，Styler to HTML 是一项非常有趣且有趣的任务。我说的是 Pandas Library 的方法Styler.to_html– 。
此方法美化表格（在本例中为数据框）。这种美化是在 pandas 库的另一种方法（称为style.Styler.
当这些美化后的数据作为输入传递给 Styler.to_html 时，我们会得到字符串形式的 HTML 代码作为输出。此输出还可用于使用编辑器生成任何网页。
在本教程中，我们将获取一个数据框，对其进行样式设置并从中获取 HTML 代码。
请阅读这篇类似的文章，了解如何将数据框呈现为 HTML 表。
让我们首先尝试了解什么是 Styler 和 HTML。
什么是 HTML？
HTML 代表超文本标记语言。HTML 帮助我们创建网站和网页，并使它们看起来丰富多彩。当执行 HTML 代码时，它会在浏览器中显示静态网页。HTML 在标签上运行。段落、标题甚至图像有不同类型的标签。
使用 HTML、CSS（级联样式表）和 JavaScript，您可以设计您的网站并创造奇迹！
我们知道 Pandas 库是一个非常有用的工具，能够处理任何形式的数据。这个库也有多种方法来处理 HTML 代码！
阅读这篇文章，了解如何使用 Pandas 库读取 HTML 表格。
让我们看一下在 Web 浏览器中显示消息的简单 HTML 代码。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TEST</title></head><body> <h1> TEST DOCUMENT</h1> <p>HELLO WORLD!</p></body></html> |
在 head 元素内，我们使用 title 标签的帮助指定了页面的标题。
来到正文，我们给出了一个标题（h1）。该标头是可定制的，这意味着它可以是 h0、h1、h2 等中的任何内容。然后在标签（p）段落中，我们写了一条简单的消息 – HELLO WORLD！最后，body 和 html 标签关闭。
运行此代码时，它会在您的浏览器中创建一个网页。
您可以使用不同的颜色、字体和背景自定义页面。
注意：在此示例中我使用了 Microsoft Visual Studio Code。您可以使用您选择的任何编辑器。在线 HTML 编辑器也能正常工作！
Styler 类解释
一个简单明了的数据框可能看起来很无聊。如果我们能让这个看起来沉闷的数据框提供更多信息且更具视觉吸引力怎么办？
Pandas 库的 style 属性就是这样做的。我们可以使用此属性来创建样式器对象。此方法用于对数据框或系列的元素进行颜色编码、突出显示某些数据、可视化数据框等等。
让我们看一个如何将此方法应用于 pandas 数据框的示例。
让我们生成一个包含 50 个随机值的数据框并对其进行样式设置。
|
1
2
3
4
|
import pandas as pdimport numpy as npdf = pd.DataFrame(np.random.randint(50, size=(4,6)))print(df) |
我们在上面的代码片段中导入了 pandas 和 numpy 库。numpy 库的函数random用于创建分布在 4 行 6 列的 24 个条目的数据框。
所有条目都在 1 到 50 之间。
该数据框称为 df。
我们使用 打印上述数据框print()。
在此数据框中，让我们使用样式器对象突出显示每行的最大值和最小值。
|
1
2
|
df.style.highlight_min(color='yellow',axis=1)\.highlight_max(color='green', axis=1) |
在此代码片段中，我们使用style 方法的highlight_max和highlight_min属性将行的最小值标记为黄色，最大值标记为绿色。将axis=1更改应用于行。
此代码是可定制的。您可以使用不同的颜色并进行实验。如果要获取按列的最大值和最小值，请将轴分量更改为axis=0。
探索 Styler to HTML 方法
该方法具有以下语法。
Styler.to_html(buf=None, *, table_uuid=None, table_attributes=None, sparse_index=None, sparse_columns=None, bold_headers=False, caption=None, max_rows=None, max_columns=None, encoding=None, doctype_html=False, exclude_styles=False, **kwargs) |
让我们看一下对这些论点的快速解释。
| 争论 | 描述 |
| 缓冲区 | 此参数采用您希望将输出写入其中的文件路径或缓冲区 如果未提供此参数，则输出为字符串 |
| 表uuid | 该参数用于指定表的 id 属性 如果指定，则显示为 id 否则，初始 Styler 属性被视为默认 接受字符串（str）作为输入 |
| 表属性 | 该字段包含用户希望包含在 <table> 标记内的所有属性 如果未指定，则考虑 Styler 的属性 具有默认的字符串类型 |
| 稀疏索引 | DOCTYPE html 属性给出结构化 html 代码 如果指定此字段，则输出包含正确结构化的 HTML 代码 否则，仅包含 <style> 和 <table> 组件 默认值为 None |
| 稀疏列 | 与sparse_index类似，但对列执行相同的操作 默认为None |
| 粗体标题 | 如果使用此参数，CSS 代码将有一个名为 的属性， font-weight:bold;该属性以粗体显示标题默认为 False |
| 标题 | 包括表格标题 默认为“无” |
| 最大行数 | 该参数将决定 Html 表将有多少行， 默认值为 None |
| 最大列数 | 类似于max_rows 确定要包含在表中的列数 默认值为 None 表示显示每一行和每一列 |
| 编码 | DOCTYPE html 属性给出结构化 HTML 代码 如果指定此字段，则输出包含正确结构化的 html 代码 否则，仅包含 <style> 和 <table> 组件 默认值为 None |
| 文档类型_html | DOCTYPE html 属性提供结构化 HTML 代码 如果指定此字段，则输出包含正确结构化的 HTML 代码 否则，仅包含 <style> 和 <table> 组件 默认值为 None |
| 排除样式 | 该参数决定是包含表格的 <style> 组件还是仅包含 <table> 元素 默认情况下，它设置为 False |
| **夸格 | 包含要传递给 .html 方法的任何其他参数 |
返回： 如果参数为 None，则返回字符串形式的 HTML 代码buf。
让我们看一下这种方法的几个例子。
我们将看到的所有示例都遵循以下过程。
- 创建数据框
- 设置数据框样式
- 使用方法获取HTML代码
styler.to_html - 使用 HTML 代码在浏览器中创建网页
正如我们之前所看到的，HTML 代码以引号 (' ') 括起来的字符串形式返回。请确保删除引号和中间的换行符 (\n)，以呈现正确的 HTML 代码而不会出现错误。
将 Styler 从数据帧写入 HTML
在此示例中，我们采用一个数据框，设置某些条件来设置其样式，然后渲染一个 HTML 表格。
让我们首先从数据框开始。
|
1
2
3
|
import pandas as pddf=pd.DataFrame(([1,12],[13,4],[5,26]))df |
数据框是在 pandas 库的方法的帮助下创建的pd.DataFrame。pandas 库在第一行导入。数据框称为df。
在最后一行，我们正在打印数据框。
现在让我们看看如何设计这个数据框的样式。
s=df.style.highlight_max(color='green',axis=1)s |
我们采用了一个名为 s 的对象来存储从df.style. 在上面的代码中，我们尝试用绿色突出显示一行的最大值。
样式化的数据框如下所示。
最后，我们将从该数据框中渲染一个 HTML 表格。
s.to_html() |
看起来很可怕。只需尝试复制代码并将其按照结构粘贴到任何 HTML 编辑器中即可。
HTML 代码应该如下所示。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <style type="text/css"> #T_85669_row0_col1, #T_85669_row1_col0, #T_85669_row2_col1 { background-color: green; } </style> <table id="T_85669" class="dataframe"> <thead> <tr> <th class="blank level0" > </th> <th id="T_85669_level0_col0" class="col_heading level0 col0" >0</th> <th id="T_85669_level0_col1" class="col_heading level0 col1" >1</th> </tr> </thead> <tbody> <tr> <th id="T_85669_level0_row0" class="row_heading level0 row0" >0</th> <td id="T_85669_row0_col0" class="data row0 col0" >1</td> <td id="T_85669_row0_col1" class="data row0 col1" >12</td> </tr> <tr> <th id="T_85669_level0_row1" class="row_heading level0 row1" >1</th> <td id="T_85669_row1_col0" class="data row1 col0" >13</td> <td id="T_85669_row1_col1" class="data row1 col1" >4</td> </tr> <tr> <th id="T_85669_level0_row2" class="row_heading level0 row2" >2</th> <td id="T_85669_row2_col0" class="data row2 col0" >5</td> <td id="T_85669_row2_col1" class="data row2 col1" >26</td> </tr> </tbody> </table></body></html> |
运行此代码时，它会在您的网络浏览器中创建一个静态网页。
正如您所看到的，我们已经成功创建了一个 HTML 代码，该代码用绿色突出显示了最大值。
将样式器写入带有粗体标题的 HTML
在此示例中，我们将采用随机值的数据框，设置阈值，并用不同的颜色突出显示低于和高于该值的值。我们可以借助用户定义的函数来做到这一点。
设置数据框的样式后，我们将渲染一个 HTML 表格，其中所有标题都以粗体显示。
下面给出了创建具有随机值的数据框的代码。
|
1
2
3
4
|
import pandas as pdimport numpy as npdf=pd.DataFrame(np.random.randint(100,size=(4,6)))df |
在上面的代码中，我们导入了 pandas 和 numpy 库来处理数据框。
我们创建了一个名为 df 的变量来存储数据框。numpy库的函数random用于生成1到100之间的随机数。所有这些数字都存储在四行六列中。
输出如下所示。
现在让我们看看如何设计这个数据框的样式。
|
1
2
3
4
5
6
|
def gre(val): color = 'green' if val > 35 else 'red' return f'background-color: {color}'sdf = df.style.applymap(gre)sdf |
因此，我们在关键字的帮助下创建了一个名为 gre 的函数def。该函数用于根据特定条件分配颜色。在此代码中，我指定任何大于 35 的值都应以绿色突出显示。名为 val 的变量用作函数的参数。所有其他数字应以红色突出显示。CSS 的属性background-color用于分配适当的颜色。
接下来，名为 sdf 的变量存储样式数据框。Stylerapplymap类的属性用于将颜色与相应的值进行映射。
最后，我们使用此样式数据框渲染 HTML 表格，并指定标题必须加粗。
sdf.to_html(bold_headers=True) |
HTML 代码应该如下所示。
<!DOCTYPE html><html><title></title><head></head><body> <h1></h1> <style type="text/css"> #T_4c668 th { font-weight: bold; } #T_4c668_row0_col0, #T_4c668_row0_col1, #T_4c668_row1_col0, #T_4c668_row2_col0, #T_4c668_row2_col3, #T_4c668_row2_col4, #T_4c668_row2_col5, #T_4c668_row3_col1, #T_4c668_row3_col2, #T_4c668_row3_col3 { background-color: red; } #T_4c668_row0_col2, #T_4c668_row0_col3, #T_4c668_row0_col4, #T_4c668_row0_col5, #T_4c668_row1_col1, #T_4c668_row1_col2, #T_4c668_row1_col3, #T_4c668_row1_col4, #T_4c668_row1_col5, #T_4c668_row2_col1, #T_4c668_row2_col2, #T_4c668_row3_col0, #T_4c668_row3_col4, #T_4c668_row3_col5 { background-color: green; } </style> <table id="T_4c668"> <thead> <tr> <th class="blank level0"> </th> <th id="T_4c668_level0_col0" class="col_heading level0 col0">0</th> <th id="T_4c668_level0_col1" class="col_heading level0 col1">1</th> <th id="T_4c668_level0_col2" class="col_heading level0 col2">2</th> <th id="T_4c668_level0_col3" class="col_heading level0 col3">3</th> <th id="T_4c668_level0_col4" class="col_heading level0 col4">4</th> <th id="T_4c668_level0_col5" class="col_heading level0 col5">5</th> </tr> </thead> <tbody> <tr> <th id="T_4c668_level0_row0" class="row_heading level0 row0">0</th> <td id="T_4c668_row0_col0" class="data row0 col0">11</td> <td id="T_4c668_row0_col1" class="data row0 col1">31</td> <td id="T_4c668_row0_col2" class="data row0 col2">98</td> <td id="T_4c668_row0_col3" class="data row0 col3">63</td> <td id="T_4c668_row0_col4" class="data row0 col4">49</td> <td id="T_4c668_row0_col5" class="data row0 col5">81</td> </tr> <tr> <th id="T_4c668_level0_row1" class="row_heading level0 row1">1</th> <td id="T_4c668_row1_col0" class="data row1 col0">12</td> <td id="T_4c668_row1_col1" class="data row1 col1">50</td> <td id="T_4c668_row1_col2" class="data row1 col2">59</td> <td id="T_4c668_row1_col3" class="data row1 col3">87</td> <td id="T_4c668_row1_col4" class="data row1 col4">38</td> <td id="T_4c668_row1_col5" class="data row1 col5">66</td> </tr> <tr> <th id="T_4c668_level0_row2" class="row_heading level0 row2">2</th> <td id="T_4c668_row2_col0" class="data row2 col0">31</td> <td id="T_4c668_row2_col1" class="data row2 col1">37</td> <td id="T_4c668_row2_col2" class="data row2 col2">89</td> <td id="T_4c668_row2_col3" class="data row2 col3">16</td> <td id="T_4c668_row2_col4" class="data row2 col4">8</td> <td id="T_4c668_row2_col5" class="data row2 col5">35</td> </tr> <tr> <th id="T_4c668_level0_row3" class="row_heading level0 row3">3</th> <td id="T_4c668_row3_col0" class="data row3 col0">64</td> <td id="T_4c668_row3_col1" class="data row3 col1">31</td> <td id="T_4c668_row3_col2" class="data row3 col2">0</td> <td id="T_4c668_row3_col3" class="data row3 col3">33</td> <td id="T_4c668_row3_col4" class="data row3 col4">85</td> <td id="T_4c668_row3_col5" class="data row3 col5">44</td> </tr> </tbody> </table></body></html> |
运行此代码时，它会在 Web 浏览器中创建一个带有粗体标题的 HTML 表格。
使用 Doctype 将 Styler 写入 HTML
在此示例中，我们将看到使用字典创建数据框并将其样式设置为条形图。
然后使用该样式数据框来呈现具有该DOCTYPE结构的 HTML 代码。
import pandas as pddict={'Name':['Akhil','Anand','Bhavya','Chandu','Divya'], 'Marks':[98,76,80,65,92], 'Age':[22,21,23,22,25]}df=pd.DataFrame(dict)df |
数据框如下。
现在让我们设置数据框的样式。我们将计算Marksusinggroupby函数的平均值，为该函数创建一个条形图，并用红色突出显示它。
s=df.groupby(['Marks'], as_index=False).mean().\style.bar(color='red')s |
下面给出了样式化的数据框。
现在让我们使用方法获取HTML代码.to_html()。在这个方法中，我们还将doctype_html参数指定为True，这会在DOCTYPE HTML5中创建HTML代码。
s.to_html(doctype_html=True) |
使用doctype_html和不使用有什么区别？
您已经看到了我们在方法中没有使用 doctype_html 时的输出。正如语法中所讨论的，这会使用 <style> 和 <table> 等基本元素呈现 HTML 代码。但是如果我们使用它，我们会得到一个标准的 HTML 代码作为输出。
HTML 代码应该如下所示。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <style type="text/css"> #T_ad601_row0_col0 { width: 10em; background: linear-gradient(90deg, red 66.3%, transparent 66.3%); } #T_ad601_row0_col1, #T_ad601_row4_col1 { width: 10em; background: linear-gradient(90deg, red 88.0%, transparent 88.0%); } #T_ad601_row1_col0 { width: 10em; background: linear-gradient(90deg, red 77.6%, transparent 77.6%); } #T_ad601_row1_col1 { width: 10em; background: linear-gradient(90deg, red 84.0%, transparent 84.0%); } #T_ad601_row2_col0 { width: 10em; background: linear-gradient(90deg, red 81.6%, transparent 81.6%); } #T_ad601_row2_col1 { width: 10em; background: linear-gradient(90deg, red 92.0%, transparent 92.0%); } #T_ad601_row3_col0 { width: 10em; background: linear-gradient(90deg, red 93.9%, transparent 93.9%); } #T_ad601_row3_col1, #T_ad601_row4_col0 { width: 10em; background: linear-gradient(90deg, red 100.0%, transparent 100.0%); } </style></head><body> <table id="T_ad601"> <thead> <tr> <th class="blank level0"> </th> <th id="T_ad601_level0_col0" class="col_heading level0 col0">Marks</th> <th id="T_ad601_level0_col1" class="col_heading level0 col1">Age</th> </tr> </thead> <tbody> <tr> <th id="T_ad601_level0_row0" class="row_heading level0 row0">0</th> <td id="T_ad601_row0_col0" class="data row0 col0">65</td> <td id="T_ad601_row0_col1" class="data row0 col1">22.000000</td> </tr> <tr> <th id="T_ad601_level0_row1" class="row_heading level0 row1">1</th> <td id="T_ad601_row1_col0" class="data row1 col0">76</td> <td id="T_ad601_row1_col1" class="data row1 col1">21.000000</td> </tr> <tr> <th id="T_ad601_level0_row2" class="row_heading level0 row2">2</th> <td id="T_ad601_row2_col0" class="data row2 col0">80</td> <td id="T_ad601_row2_col1" class="data row2 col1">23.000000</td> </tr> <tr> <th id="T_ad601_level0_row3" class="row_heading level0 row3">3</th> <td id="T_ad601_row3_col0" class="data row3 col0">92</td> <td id="T_ad601_row3_col1" class="data row3 col1">25.000000</td> </tr> <tr> <th id="T_ad601_level0_row4" class="row_heading level0 row4">4</th> <td id="T_ad601_row4_col0" class="data row4 col0">98</td> <td id="T_ad601_row4_col1" class="data row4 col1">22.000000</td> </tr> </tbody> </table></body></html> |
执行上述代码后，将在网络浏览器中创建网页。
概括
总而言之，我们已经学习了如何使用 Styler 类来设置 pandas 数据框的样式。我们已经看到了一个使用随机值创建的数据框的示例，并设置了样式，以便该数据框的最小值标记为黄色，而最大值标记为红色。
接下来我们就了解了什么是HTML。我们已经看到了一个简单的 HTML 代码，它在 Web 浏览器中创建一个网页，显示一条简单的消息 – HELLO WORLD！
接下来，我们学习了该方法的语法 styler.to_html– 。我们已经理解了该方法每个论证的必要性。
来看示例，首先，我们设计了一个简单的数据框样式，以便数据框的最大值以绿色突出显示。
然后，该样式数据框用于呈现 HTML 代码，从而生成与样式数据框等效的网页。
在下一个示例中，我们遵循相同的过程，但我们定义了一个用户定义的函数来根据特定条件为数据框的值着色。我们使用该方法的bold_headers参数使标题更粗。
最后，我们尝试创建数据框平均值的条形图并将其标记为红色。为了将样式数据框转换为 HTML，我们使用了doctype_html根据结构呈现 HTML 代码。
参考
要了解有关 Styler 类的更多信息，请访问 pandas 官方文档。