Python 使用to_html将CSS类应用于熊猫数据框架
我在应用带有Pandas“to_html”方法的“classes”参数来设置数据帧样式时遇到问题 类:str或list或tuple,默认为无 要应用于结果html表的CSS类“ 发件人: 我能够呈现如下样式的数据帧(例如): 如何使用带有“to_html”的“类”为数据帧的html输出设置样式,如下所示:Python 使用to_html将CSS类应用于熊猫数据框架,python,pandas,dataframe,Python,Pandas,Dataframe,我在应用带有Pandas“to_html”方法的“classes”参数来设置数据帧样式时遇到问题 类:str或list或tuple,默认为无 要应用于结果html表的CSS类“ 发件人: 我能够呈现如下样式的数据帧(例如): 如何使用带有“to_html”的“类”为数据帧的html输出设置样式,如下所示: df.to_html('myhtml.html',classes=<something here>) df.to_html('myhtml.html',classes=) Pan
df.to_html('myhtml.html',classes=<something here>)
df.to_html('myhtml.html',classes=)
Pandas'to_html
只需输出一个包含html表标记的大字符串。classes参数是一个方便的处理程序,用于为
提供一个class属性,该属性将在以前创建的CSS文档中引用,该文档将对其进行样式设置。因此,将合并到一个引用外部CSS的更广泛的html文档构建中
有趣的是,to_html
添加了两个类
,它们可以在CSS中单独引用,.dataframe{…}.mystyle{…}
,或者一起引用.dataframe.mystyle{…}
。下面用随机数据演示
数据
import pandas as pd
import numpy as np
pd.set_option('display.width', 1000)
pd.set_option('colheader_justify', 'center')
np.random.seed(6182018)
demo_df = pd.DataFrame({'date': np.random.choice(pd.date_range('2018-01-01', '2018-06-18', freq='D'), 50),
'analysis_tool': np.random.choice(['pandas', 'r', 'julia', 'sas', 'stata', 'spss'],50),
'database': np.random.choice(['postgres', 'mysql', 'sqlite', 'oracle', 'sql server', 'db2'],50),
'os': np.random.choice(['windows 10', 'ubuntu', 'mac os', 'android', 'ios', 'windows 7', 'debian'],50),
'num1': np.random.randn(50)*100,
'num2': np.random.uniform(0,1,50),
'num3': np.random.randint(100, size=50),
'bool': np.random.choice([True, False], 50)
},
columns=['date', 'analysis_tool', 'num1', 'database', 'num2', 'os', 'num3', 'bool']
)
print(demo_df.head(10))
# date analysis_tool num1 database num2 os num3 bool
# 0 2018-04-21 pandas 153.474246 mysql 0.658533 ios 74 True
# 1 2018-04-13 sas 199.461669 sqlite 0.656985 windows 7 11 False
# 2 2018-06-09 stata 12.918608 oracle 0.495707 android 25 False
# 3 2018-04-24 spss 88.562111 sql server 0.113580 windows 7 42 False
# 4 2018-05-05 spss 110.231277 oracle 0.660977 windows 10 76 True
# 5 2018-04-05 sas -68.140295 sql server 0.346894 windows 10 0 True
# 6 2018-05-07 julia 12.874660 postgres 0.195217 ios 79 True
# 7 2018-01-22 r 189.410928 mysql 0.234815 windows 10 56 False
# 8 2018-01-12 pandas -111.412564 sql server 0.580253 debian 30 False
# 9 2018-04-12 r 38.963967 postgres 0.266604 windows 7 46 False
CSS(另存为df_style.CSS)
熊猫
pd.set_option('colheader_justify', 'center') # FOR TABLE <th>
html_string = '''
<html>
<head><title>HTML Pandas Dataframe with CSS</title></head>
<link rel="stylesheet" type="text/css" href="df_style.css"/>
<body>
{table}
</body>
</html>.
'''
# OUTPUT AN HTML FILE
with open('myhtml.html', 'w') as f:
f.write(html_string.format(table=demo_df.to_html(classes='mystyle')))
表的pd.set_选项('colheader_justify','center')#
html_字符串=“”
带有CSS的HTML数据框架
{table}
.
'''
#输出一个HTML文件
以open('myhtml.html','w')作为f:
f、 写入(html_string.format(table=demo_df.to_html(class='mystyle'))
输出 HTML(引用df_style.css,假定位于同一目录中;请参阅表中的类参数)
带有CSS的HTML数据框架
日期
分析工具
num1
数据库
num2
操作系统
num3
布尔
0
2018-04-21
熊猫
153.474246
mysql
0.658533
网间网操作系统
74
真的
1.
2018-04-13
sas
199.461669
sqlite
0.656985
视窗7
11
假的
2.
2018-06-09
斯塔塔
12.918608
神谕
0.495707
安卓
25
假的
3.
2018-04-24
spss
88.562111
sql server
0.113580
视窗7
42
假的
4.
2018-05-05
spss
110.231277
神谕
0.660977
视窗10
76
真的
...
我是这样做的
为css代码创建一个文本文件,并在这里写下您的css代码,比如css_style.txt
现在将这个txt文件作为python文件中的字符串读取
打开('css_style.txt','r')作为myfile的:
style=myfile.read()
现在是HTML代码
"""<html><head>Something Something</head>{1}<div>{0}</div></html>""".format(some_panda_dataframe.to_html,style)
“Something Something{1}{0}”“。格式(Something_panda_dataframe.to_html,样式)
在我的例子中,css_style.txt文件是
<style>
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: center;
padding: 8px;
}
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #FFD5D5}
th {
background-color: #0000FF;
color: white;
}
</style>
桌子{
边界塌陷:塌陷;
宽度:100%;
}
th{
文本对齐:居中;
填充:8px;
}
运输署{
文本对齐:左对齐;
填充:8px;
}
tr:n子(偶数){背景色:#FFD5D5}
th{
背景色:#0000FF;
颜色:白色;
}
本质上,pandas.to_html()只导出一个普通的html表。您可以在正文中的任何位置插入表格,并通过样式部分中的CSS控制样式
<html>
<head>
<style>
table, th, td {{font-size:10pt; border:1px solid black; border-collapse:collapse; text-align:left;}}
th, td {{padding: 5px;}}
</style>
</head>
<body>
{
pandas.to_html()
}
</body>
</html>
表,th,td{{字体大小:10pt;边框:1px纯黑色;边框折叠:折叠;文本对齐:左;}
th,td{{padding:5px;}}
{
pandas.to_html()
}
我发现最精确、坦率地说也是最简单的方法就是跳过样式设置,使用DF.to_dict()方法将DF转换成字典
特别是给我带来麻烦的是,在outlook电子邮件中显示样式化的pandas html,因为它无法正确呈现pandas正在生成的css混乱
迭代dict并在那里生成html,只需将所需的键/值包装在标记中,添加类等,然后将所有这些连接到一个字符串中。
然后使用预定义的css将此str粘贴到准备好的模板中
为了方便起见,我发现两次导出相同的df很有用,使用.to_dict()和to_dict('index')首先填充列,然后逐行向下导出。或者,只需列出相关的列名
dict_data = [df.to_dict(), df.to_dict('index')]
return_str = '<table><tr>'
for key in dict_data[0].keys():
return_str = return_str + '<th class="header">' + key + '</th>'
return_str = return_str + '</tr>'
for key in dict_data[1].keys():
return_str = return_str + '<tr><th class="index">' + key + '</th>'
for subkey in dict_data[1][key]:
return_str = return_str + '<td>' + dict_data[1][key][subkey] + '</td>'
return_str = return_str + '</tr></table>'
dict_data=[df.to_dict(),df.to_dict('index')]
return_str=''
对于dict_数据[0]中的键。键():
return\u str=return\u str+''+键+''
return\u str=return\u str+“”
对于dict_数据[1]中的键。键()
return\u str=return\u str+''+键+''
对于dict_数据[1][key]中的子项:
return\u str=return\u str++'+dict\u data[1][key][subkey]+''
return\u str=return\u str+“”
然后返回到模板中。您希望html文件的外观如何?我希望应用与示例中“set\u properties”方法中给定的相同属性。创建一个字符串
“”+myStyles+“”
,并将其附加到df.to\u html()
给定的字符串中。使用with
打开文件时,您不需要手动关闭()。当存在范围为
的时,该变量将被垃圾收集器销毁,文件将自动关闭。谢谢@igrinis。我已经编辑了我的问题。谢谢,这很混乱,因为在使用带有“to_html”的类之前,需要在“html_字符串”中引用.css文件。似乎应该有一种方法可以直接从参数中指定.css文件。我认为混淆之处在于将方法标记为\u html()
,而实际上是标记为\u html\u table\u string()
。此方法不会生成完整的HTML文档,类是在
输出中创建的特殊属性。另外,这个类不仅仅是为CSS保留的,还可以在Javascript/JQuery和其他程序中使用。df.to_html(myhtml.html)将生成一个简单的datafra html表
<html>
<head>
<style>
table, th, td {{font-size:10pt; border:1px solid black; border-collapse:collapse; text-align:left;}}
th, td {{padding: 5px;}}
</style>
</head>
<body>
{
pandas.to_html()
}
</body>
</html>
dict_data = [df.to_dict(), df.to_dict('index')]
return_str = '<table><tr>'
for key in dict_data[0].keys():
return_str = return_str + '<th class="header">' + key + '</th>'
return_str = return_str + '</tr>'
for key in dict_data[1].keys():
return_str = return_str + '<tr><th class="index">' + key + '</th>'
for subkey in dict_data[1][key]:
return_str = return_str + '<td>' + dict_data[1][key][subkey] + '</td>'
return_str = return_str + '</tr></table>'